Not getting proper result using data-confirm-modal - ruby-on-rails

Question

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, 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.
My question is, Is there any other way to use modal without using it inside a loop.
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">
View Details
Edit
</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>
Create user
</p>
<p>
Create From Template
</p>
</div>
</div>
</div>
Code using bootstrap modal
<div class="row">
<% #user.each do |c| %>
<div class="col-lg-3">
<div class="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">
<i class="fa fa-trash" aria-hidden="true" data-toggle="modal" data-
target="#exampleModal"></i>
</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">
View Details
Edit
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Delete
Confirmation</h5>
<button type="button" class="close" data-dismiss="modal" aria-
label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure?
</div>
<div class="modal-footer">
<button class="btn btn-danger">
<%= link_to 'Ok', user_path(c.id), method: :delete %>
</button>
</div>
</div>
</div>
</div>
<% end %>
<div class="col-lg-3">
<div class="card card-2 d-flex align-items-center justify-content-center">
<p>
Create user
</p>
<p>
Create From Template
</p>
</div>
</div>
</div>