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

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>Lorem ipsum dolor sit amet, quo meis audire placerat eu, te eos porro veniam. An everti maiorum detracto mea. Eu eos dicam voluptaria, erant bonorum albucius et per, ei sapientem accommodare est. Saepe dolorum constituam ei vel</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>Lorem ipsum dolor sit amet, quo meis audire placerat eu, te eos porro veniam. An everti maiorum detracto mea. Eu eos dicam voluptaria, erant bonorum albucius et per, ei sapientem accommodare est. Saepe dolorum constituam ei vel</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