Bootstrap 4 beta image gallery with modals

[mlegg10]

I’m trying to make an image gallery with each image having a modal. I want each logo to be clicked and open that company’s reference letter in the modal. This is what I have tried but each logo when clicked only opens the hardrock letter in the modal. Here is a link to a codepen I tried to do it on.

What am I doing wrong? Thanks
javascript code before </body> tag

  /* show lightbox when clicking a thumbnail */
    $('a.thumb').click(function(event){
    	event.preventDefault();
    	var content = $('.modal-body');
    	content.empty();
      	var title = $(this).attr("title");
      	$('.modal-title').html(title);      	
      	content.html($(this).html());
      	$(".modal-profile").modal({show:true});
    });

css part

.modal-body {
  margin:auto;
  max-width:100%;
}

html

<!-- image trigger modal -->
<a data-target="#myModal" data-toggle="modal">
  <img src="http://www.pscompetitiveedge.com/references/logos/hardrock4.gif" class="thumbnail img-fluid" alt="Hard Rock">
</a>
<!-- Modal -->
<div tabindex="-1" class="modal fade" id="myModal" role="dialog" aria-hidden="true" aria-labelledby="myModalLabel">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
         </div>
      <div class="modal-body">
        <img src="http://www.pscompetitiveedge.com/references/ltrs/hardrock.jpg" class="img-fluid">
      </div>
      <div class="modal-footer">
        <button class="btn btn-warning" type="button" data-dismiss="modal">Close</button>
       </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- image trigger modal -->
<a data-target="#myModal" data-toggle="modal">
  <img src="http://www.pscompetitiveedge.com/references/logos/paragon.jpg" class="thumbnail img-fluid" alt="Hard Rock">
</a>
<!-- Modal -->
<div tabindex="-1" class="modal fade" id="myModal" role="dialog" aria-hidden="true" aria-labelledby="myModalLabel">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
         </div>
      <div class="modal-body">
        <img src="http://www.pscompetitiveedge.com/references/ltrs/paragon.jpg" class="img-fluid">
      </div>
      <div class="modal-footer">
        <button class="btn btn-warning" type="button" data-dismiss="modal">Close</button>
       </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- image trigger modal -->
<a data-target="#myModal" data-toggle="modal">
  <img src="http://www.pscompetitiveedge.com/references/logos/USHomeLogo.jpg" class="thumbnail img-fluid" alt="US Home">
</a>
<!-- Modal -->
<div tabindex="-1" class="modal fade" id="myModal" role="dialog" aria-hidden="true" aria-labelledby="myModalLabel">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
         </div>
      <div class="modal-body">
        <img src="http://www.pscompetitiveedge.com/references/ltrs/ushome.jpg" class="img-fluid">
      </div>
      <div class="modal-footer">
        <button class="btn btn-warning" type="button" data-dismiss="modal">Close</button>
       </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

[mlegg10]

I solved the problem. by adding data-target=“#hr” and changing the target for each image.

<img class="img-fluid" data-toggle="modal" data-target="#hr" alt="Hard Rock" src="http://www.pscompetitiveedge.com/references/logos/hardrock4.gif">
<!-- The modal -->
<div class="modal fade" id="hr" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-danger close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<img class="img-fluid" alt="Hard Rock" src="http://www.pscompetitiveedge.com/references/ltrs/hardrock.jpg">
</div>
  <div class="modal-footer">
  <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
 </div></div></div></div></div>
</div>