enlarge image in bootstrap:- changes all images to enlarged image

Question

I want to display enlarge the image when a user clicks on an image. then I follow steps form this How to use bootstrap modal on multiple images on same page on image click?
but now when I click on an image this image is automatically changing another image too. this is before enlarged an image:

this is when we click on an image:

and now all image are changed:

I am using this code.

 <div class="row" id="advertisement" style="margin-bottom: 10px;">

  </div>

Modal Code

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
        <center><img class="imgr img-responsive" src="" width="80%" height="200px" /></center>

</div>
</div>

This is javascript code:-

  $(document).ready(function()
 {
 var url="http://api.dentallabworld.com/advertisement.php";
 $.getJSON(url,function(result){
 console.log(result);
 $.each(result, function(i, field){
 var advertisement=field.Image;
 var size=field.Size;
 $("#advertisement").append('<div class="col s'+size+'" style="padding:2.5px 
 5px 5px 5px; "><img id="'+(i+1)+'" class="imgr" width="100%" height="200px" 
 data-toggle="modal" data-target="#myModal" 
  src="{image path}/'+advertisement+'"></div>');

   });
   });
   });

Answer 1

Try This -

<div class="row" id="advertisement" style="margin-bottom: 10px;">

</div>
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <center><img class="enlarged_image imgr img-responsive" src="" width="80%" height="200px" /></center>
    </div>
</div>

$(document).ready(function() {
    var url = "http://api.dentallabworld.com/advertisement.php";
    $.getJSON(url, function(result) {
        console.log(result);
        $.each(result, function(i, field) {
            var advertisement = field.Image;
            var size = field.Size;
            $("#advertisement").append('<div class="cols' + size + '" style="padding: 2.5px 5px 5px 5px;"><a href="#" class="pop"><img id="'+(i+1)+'" class="click_to_enlarge imgr" width="100%" height="200px" src="{image_path}/'+advertisement+'" onclick="showImg({image_path}/\''+advertisement+'\')"></a></div>');

        });
    });
});

var showImg = function(src) {
    $('.enlarged_image').attr('src', src);
    $('#myModal').modal('show');
}