Rails Magnific Pop-Up with Table Rows Unique Edit Button

Question

I have a table of records with each row containing an edit button that uses the magnific pop-up gem. Whenever an edit button is clicked it is suppose to show a pop-up form that contains the clicked record's information. What keeps happening though is only the first record of the table pops up when any edit button in the table is clicked. How do I make the button unique to each row(record) in the table?

Any help is much appreciated.

view file:

<div class="row">
<div class="col-md-12">
  <div class="table-responsive">
    <table class="table table-bordered table-striped table-hover">
      <tr>
        <th>Position</th>
        <th>Title</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Edit</th>
        <th>Delete</th>
      </tr>
      <% begin %>
        <% @administration.each do |a| %>
            <tr>
              <td><%=a.position.name rescue nil%></td>
              <td><%=a.title.letters%></td>
              <td><%=a.first_name%></td>
              <td><%=a.last_name%></td>
              <td>
                <button type="button" name="button" href="#modal-popup" class="open-popup-link" >Edit</button>
                <div id="modal-popup" class="white-popup mfp-hide">
                  <%= render 'managers/parts/administration_form', locals: {model: a} %>
                </div>
              </td>
              <td><%=button_to "X", destroy_administration_path(admin_id: a), method: 'delete'%></td>
            </tr>
        <%end%>
      <% rescue %>
        <% nil %>
      <% end %>
    </table>
  </div>
</div>

_administration_form partial

<%= form_for locals[:model], url: update_parts_path, html: {method: :post} do |f| %>
  <%=hidden_field_tag "id", locals[:model].try(:id)%>

  <div>
    <label>Position</label>
    <%= f.select :position_id,  content_tag(:option,'None',:value=>"") + options_from_collection_for_select(Position.select(:id, :name), 'id', 'name') %>
  </div>
  <div>
    <label>Title</label>
    <%= f.select :title_id, options_from_collection_for_select(Title.select(:id, :letters), 'id', 'letters') %>
  </div>
  <div>
    <label>First Name</label>
    <%= f.text_field :first_name, class: "form-control" %>
  </div>
  <div>
    <label>Last Name</label>
    <%= f.text_field :last_name, class: "form-control" %>
  </div>
  <div>
    <label>Image</label>
    <%= f.file_field :image, :onchange => "readURL(this, \'logo_prev\');" %>
    <img id="logo_prev" src="<%=locals[:model].image.url || '#'%>" alt="logo image" />
  </div>
  <br>
  <%= f.submit_tag "Submit" %>
<% end %>

javascript

  $('.open-popup-link').magnificPopup({
    type:'inline',
    midClick: true 
  });

Thanks.

---

Solution:

Used Michael's code to pass the ID using a data variable. Instead of using #{a.id} I used the Rails version <%=a.id%>. Thanks for the help!

<a href="#modal-popup-<%=a.id%>" class="open-popup-link" data-mfp-src="#modal-popup-<%=a.id%>">Edit</a>
<div id="modal-popup-<%=a.id%>" class="white-popup mfp-hide">
    <%= render 'managers/parish_parts/parish_administration_form', locals: {model: a} %>
</div>

Answer 1

You could write:

<a data-mfp-src="#modal-popup-#{a.id}" href="#modal-popup-#{a.id}" class="open-popup-link" >Edit</button>
<div id="modal-popup-#{a.id}" class="white-popup mfp-hide">
  <%= render 'managers/parts/administration_form', locals: {model: a} %>
</div>

You need an <a> tag and singular ID's.

According to the docs this should work as is, unless the initialization has to be called on each single element.

If that's the issue you can try:

$.each($('.open-popup-link'), function() {
  $(this).magnificPopup({
    type:'inline',
    midClick: true 
  });
});

The docs also mention an alternate way of passing the popup id, through a data attribute:

<a href="#modal-popup-#{a.id}" class="open-popup-link" data-mfp-src="#modal-popup-#{a.id}">

If nothing of that works you can do it manually

  $.each($('.open-popup-link'), function() {
    $(this).on('click', function() {
      var target = $(this).attr('href');
      $.magnificPopup.open({
        items: {
          src: target,
          type: 'inline'
        }
      }, 0);
    });
  });