Getting data in each loop rails

Question

In my rails application I have this each loop

<ul>
<% @job.job_applications.each do |job_application| %>
  <li>
    <%= raw (simple_format(job_application.cover_letter)) %>

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#pdfModal">
  view cv
</button>

<!-- Modal -->
<div class="modal fade" id="pdfModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" style = "height:500px; width:1000px;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body" style = "height:500px; width:1000px;">
        <iframe src="<%= job_application.resume.url %>" frameborder="0" style = "height:100%; width:100%;"></iframe>
      </div>
    </div>
  </div>
</div>
</li>
<% end %>
</ul>

So what I'm trying to do is to get the cover_letter and open the resume in modal for every job_application but the problem is for resume because whatever the resume that I open it will show the first application resume in modal So I am wondering why I'm getting this is there any error in my code because something like thsi <%= link_to "Applicant cv", job_application.resume.url %> work just fine but I want to open resume in modal

Answer 1

Your problem is that you are creating many modal divs, all with the id of "pdfModal", and every button on your page is targeting the SAME id. In CSS, an ID is supposed to be used only once per page. So, to fix your problem, I'd suggest adding an index to your each loop, naming each modal according to the index, and then having the button point to that specific modal.

<% @job.job_applications.each_with_index do |job_application, index| %>

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#pdfModal-<%= index %>">

<div class="modal fade" id="pdfModal-<%= index %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">