使用 Modal 时无法弹出图像

Question

Although I have differentiated between the modals, only the first modal works but the second modal pops up the image for the first modal although the source image is that of the second modal. Can someone please assist me in sorting this issue out?

<div class="col-xs-6 col-md-3">
  <div class="portfolio-item">
    <img class="img-portfolio img-responsive" src="img/arnold200x200.png" data-toggle="modal" data-target="#modal1">
    <div class="caption">
      <h3>Amino X</h3>
      <p>
        <a href="#" class="btn btn-primary" role="button">GHS 200</a>
      </p>
    </div>
  </div>
</div>

<!-- Modal AminoX-->
<div class="modal fade" id="modal1">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <a href="img/arnold.png" data-title="My First Caption" data-toggle="modal" />
        <h4 class="modal-title">Amino X</h4>
      </div>
      <div class="modal-body">
        <img src="img/arnold.png" width="350px" class="img-thumbnail" />
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="col-xs-6 col-md-3">
  <div class="portfolio-item">
    <img class="img-portfolio img-responsive" src="img/amino_x200x200.png" data-toggle="modal" data-target="#modal1" />
    <div class="caption">
      <h3>Amino X</h3>
      <p>
        <a href="#" class="btn btn-primary" role="button">GHS 200</a>
      </p>
    </div>
  </div>
</div>

<!-- Modal AminoX-->
<div class="modal fade" id="modal2">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <a href="img/amino_x200x200.png" data-title="My Second Caption" data-toggle="modal" />
        <h4 class="modal-title">Amino X</h4>
      </div>
      <div class="modal-body">
        <img src="img/aminoBig.png" width="350px" class="img-thumbnail" />
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal2">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 1

You reference modal1 in both links,update:

data-target="#modal2"

Fiddle