Not getting proper result using data-confirm-modal

I am working on a project using Rails.

I am trying to put an alert box inside a delete link.

For that, I tried using normal alert box and it was working fine, Then I used bootstrap modal, since i was using bootstrap modal code inside the loop. But it was creating modal for each loop, so i had to remove it.

Now I used Data-Confirm Modal and I followed their documentation properly, but still I am not getting any proper results.

The code is given below, Kindly give me some suggestions

 <div class="row">
  <% @user.each do |c| %>
   <div class="col-lg-3">
    <div class="card bot-card card-1">
     <div class="row">
      <div class="col-lg-8">
        <p class="d-flex align-items-center">
          <span class="green-dot"></span>
          <span class="online-text">online</span>
        </p>
       </div>
      <div class="col-lg-1">
        <%= link_to user_path(c.id), method: :delete, data: {confirm: 'Are 
      you sure?'} do %>
        <i class="fa fa-trash" aria-hidden="true" ></i>
        <%end%>
      </div>
      <div class="col-lg-1">
        <i class="far fa-clone">
        </i>
      </div>
     </div>
       <img src="assets/avatar-2.png" alt="Avatar" class="avatar" >
     <div class="card-body">
       <p class="card-title"><%= c.name %></p>
       <p class="card-text"><%= c.description %></p>
       <div class="d-flex justify-content-end card-link">
          <a href="users/#" class="card-link-1">View Details</a>
          <a href="users/<%= c.id %>" class="card-link-2">Edit</a>
        </div>
     </div>
   </div>
 </div>
</div>
<% end %>
<div class="col-lg-3">
 <div class="card card-2 d-flex align-items-center justify-content-center">
  <p>
  <a href="/users/new" class="card-link">Create user</a>
  </p>
  <p>
    <a href="/users/#" class="card-link">Create From Template</a>
   </p>
 </div>
 </div>
 </div>