Is it possible to put a modal inside a card? - ruby-on-rails

Question

I have a modal that's inside a Bootstrap Card for a confirmation if the user really wants to cancel a booking. The problem is that it doesn't show up when clicked. I see the fade effect and that's about it.
<% if Date.current.strftime('%Y-%m-%d') == data.formatted_date_time_for_comparison %>
<%= f.submit 'Cancel Booking', class: "btn btn-danger" %>
<% else %>
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#myModal">Cancel Booking</button>
<div class="modal fade text-dark" id="myModal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Confirm Cancellation</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
Are you sure you want to cancel this booking?
</div>
<div class="modal-footer">
<%= f.submit 'Cancel Booking', class: "btn btn-danger" %>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<% end %>
It compares the current date to the date of the booking's departure date and it gives a submit button straight to the controller, which in turn rejects it because cancelling on the same date isn't allowed. If that's not the case it gives a button for a modal to activate.
I'm mostly sure it's because of it buried beneath divs, specifically divs with bootstrap card classes.
Here are its parent divs:
<div class="margin-top" style="width: 600px;">
<div class="bg-dark p-3 rounded">
<h3>Reservations</h3>
</div>
<div id="accordion" class="mt-3 mb-4">
<div class="card bg-dark">
<% #reservations.reverse().each do |data| %>
<a class="btn text-light card-header" data-bs-toggle="collapse" href="#id-<%= data.id %>">
<div class="row" style="text-align: left;">
<div class="col">
<strong>Name: </strong><%= data.name %><br><br>
<!-- other records -->
</div>
<div class="col">
<strong>Departure: </strong><%= data.departure %><br>
<!-- other records -->
</div>
</div>
</a>
<div id="id-<%= data.id %>" class="collapse" data-bs-parent="#accordion">
<div class="card-body">
<div class="row">
<div class="col">
<strong>Base Price: </strong><%= data.base_price %><br>
<!-- other records -->
</div>
<div class="col d-flex align-items-end justify-content-end">
<%= form_for #cancellation, url: del_rsrv_path do |f| %>
<%= f.hidden_field :id, value: data.id %>
<%= f.hidden_field :datetime, value: data.formatted_date_time_for_comparison %>
<!-- code posted above here -->
I checked and it does work just below the first div (didn't check on deeper divs), but the problem would be passing the form params there. I'm asking if there's a workaround in either situation.
EDIT: I renamed the data-bs-target name and its respective id name and it somehow works now.