Portfolio displays same pictures instead of different one's - html, css

Question

I'm trying to display some pictures in my portfolio section on my website. On the background of the portfolio, you can see different pictures, but when i click "show details", it opens new window on same page, but pictures are both same, instead of different ...it displays pic1.png in both, instead of pic1.png and pic2.png.

Please help me out, it's driving me crazy.

This is my HTML code

<!-- PORTFOLIO IMAGE 1 -->
    <div class="col-md-4 ">
      <div class="grid mask">
        <figure> <img class="img-responsive" src="assets/img/portfolio/slika1.png" alt="">
          <figcaption>
            <h5>UX / UI</h5>
            <a data-toggle="modal" href="#myModal" class="btn btn-default">More Details</a> </figcaption>
          <!-- /figcaption --> 
        </figure>
        <!-- /figure --> 
      </div>
      <!-- /grid-mask --> 
    </div>

    <!-- MODAL SHOW THE PORTFOLIO IMAGE. In this demo, all links point to this modal. You should create
                          a modal for each of your projects. -->

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <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">Project Title</h4>
          </div>
          <div class="modal-body">
            <p><img class="img-responsive" src="assets/img/portfolio/slika1.png" alt=""></p>
            <p>Content1</p>
            <p><b><a href="#">Visit Site</a></b></p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
        <!-- /.modal-content --> 
      </div>
      <!-- /.modal-dialog --> 
    </div>
    <!-- /.modal --> 

    <!-- PORTFOLIO IMAGE 1 -->
    <div class="col-md-4 ">
      <div class="grid mask">
        <figure> <img class="img-responsive" src="assets/img/portfolio/slika2.png" alt="">
          <figcaption>
            <h5>UX / UI</h5>
            <a data-toggle="modal" href="#myModal" class="btn btn-default">More Details</a> </figcaption>
          <!-- /figcaption --> 
        </figure>
        <!-- /figure --> 
      </div>
      <!-- /grid-mask --> 
    </div>

    <!-- MODAL SHOW THE PORTFOLIO IMAGE. In this demo, all links point to this modal. You should create
                          a modal for each of your projects. -->

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <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">Project Title</h4>
          </div>
          <div class="modal-body">
            <p><img class="img-responsive" src="assets/img/portfolio/slika2.png" alt=""></p>
            <p>Content2</p>
            <p><b><a href="#">Visit Site</a></b></p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
        <!-- /.modal-content --> 
      </div>
      <!-- /.modal-dialog --> 
    </div>
    <!-- /.modal --> 
</div>

Thank you guys

Answer 1

You need to have different IDs for the different modals:

change:

<div class="modal fade" id="myModal"

to

<div class="modal fade" id="myModal2"

on the second modal

also update link reference:

<a data-toggle="modal" href="#myModal2"