Не получен правильный результат с использованием data-verify-modal

Question

Я работаю над проектом с использованием Rails.

Я пытаюсь поставить окно предупреждения внутри ссылки удаления.

Для этого я попытался использовать обычное окно оповещения, и оно работало нормально. Затем я использовал загрузчик модальный, так как я использовал загрузочный модальный код внутри цикла, он создавал модал для каждого цикла, поэтому мне пришлосьубери это.Теперь я использовал Data-Confirm Modal и правильно следовал их документации, но все равно не получаю никаких правильных результатов.

Мой вопрос: есть ли другой способ использовать модал без использования его внутри цикла.

Код приведен ниже. Пожалуйста, дайте мне несколько советов

 <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>

Код с использованием начальной загрузки

<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">
          <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 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">&times;</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>
  <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>