Идентификатор данных Rails не подбирает правильный идентификатор

Question

Я работаю над своим проектом, в котором я пытаюсь удалить элемент через модальное окно.

В основном у меня есть этот частичный код элемента списка:

<tr>
  <td class="middle">
    <div class="media">
      <div class="media-left">
        <%= link_to contact_path(contact), ":data-target" => "#show-contact-modal", ":data-toggle" => "modal", remote: true do %>
            <%= image_tag contact.contact_avatar.attached? ? contact.contact_avatar : "100x100.png", class: "media-object img-thumbnail img-rounded mr-3" %>
        <% end %>
      </div>
      <div class="media-body mt-2">
        <%= link_to contact_path(contact), ":data-target" => "#show-contact-modal", ":data-toggle" => "modal", remote: true do %>
             <h4 class="media-heading"><%= contact.name %></h4>
        <% end %>
        <address>
          <strong><i class="fa fa-map-marker"></i> <%= contact.city %>, <%= contact.state %>, <%= contact.country %>, <%= contact.zip %> </strong><br>
          <i class="fa fa-envelope"></i> <%= contact.email %> | <i class="fa fa-mobile"></i> <%= contact.mobile %> | <i class="fa fa-phone"></i> <%= contact.phone %>
        </address>
      </div>
    </div>
  </td>
  <td class="middle" width="100">
    <div class="mt-5">
    <%= link_to edit_contact_path(contact), class: "btn btn-outline-secondary btn-circle btn-xs", ":data-target" => "#new-contact-modal", ":data-toggle" => "modal", remote: true do %>
          <i class="fa fa-edit"></i>
      <% end %>

      <div class="btn btn-outline-secondary btn-circle btn-xs delete-contact" data-id="<%= contact.id %>">
        <i class="fa fa-times"></i>
      </div>
    </div>
  </td>
</tr><tr>
  <td class="middle">
    <div class="media">
      <div class="media-left">
        <%= link_to contact_path(contact), ":data-target" => "#show-contact-modal", ":data-toggle" => "modal", remote: true do %>
            <%= image_tag contact.contact_avatar.attached? ? contact.contact_avatar : "100x100.png", class: "media-object img-thumbnail img-rounded mr-3" %>
        <% end %>
      </div>
      <div class="media-body mt-2">
        <%= link_to contact_path(contact), ":data-target" => "#show-contact-modal", ":data-toggle" => "modal", remote: true do %>
             <h4 class="media-heading"><%= contact.name %></h4>
        <% end %>
        <address>
          <strong><i class="fa fa-map-marker"></i> <%= contact.city %>, <%= contact.state %>, <%= contact.country %>, <%= contact.zip %> </strong><br>
          <i class="fa fa-envelope"></i> <%= contact.email %> | <i class="fa fa-mobile"></i> <%= contact.mobile %> | <i class="fa fa-phone"></i> <%= contact.phone %>
        </address>
      </div>
    </div>
  </td>
  <td class="middle" width="100">
    <div class="mt-5">
    <%= link_to edit_contact_path(contact), class: "btn btn-outline-secondary btn-circle btn-xs", ":data-target" => "#new-contact-modal", ":data-toggle" => "modal", remote: true do %>
          <i class="fa fa-edit"></i>
      <% end %>

      <div class="btn btn-outline-secondary btn-circle btn-xs delete-contact" data-id="<%= contact.id %>">
        <i class="fa fa-times"></i>
      </div>
    </div>
  </td>
</tr>

Обратите внимание на этот код:

<div class="btn btn-outline-secondary btn-circle btn-xs delete-contact" data-id="<%= contact.id %>">
        <i class="fa fa-times"></i>
      </div>

Как видите, я пытаюсь выбрать contact.id через data-id. И затем на моем jQuery - ajax коде я пытаюсь вытащить его, чтобы удалить его:

  //Open delete contact modal
  $(document).on('click', '.delete-contact', function(){
    $('#confirm-modal').modal('show');
    contact_id = $('.delete-contact').data('id');
  });

  //Send AJAX request to delete specific record when user confirms the action
  $(document).on('click', '.confirm-delete', function(){
    $.ajax({
      url: '/dashboard/contacts/' + contact_id,
      method: 'delete',
      data: {
        contact: contact_id
      },
      success: function (category) {
      },
      error: function (xhr) {
        let errors = xhr.responseJSON;
      }
    });
  });

Однако, при попытке этого. Он не выбирает правильный contact.id, вместо этого он добавляет 1, иногда два или три и даже больше к идентификатору, который он удаляет.

Видите ли вы какие-либо ошибки в моих кодах, почему он не выбирает правильный идентификатор с помощью data-id?

Answer 1

  //init empty var 1st
   let contact_id;

  //Open delete contact modal
  $(document).on('click', '.delete-contact', function(){
    $('#confirm-modal').modal('show');
    contact_id = $(this).data('id');
  });