Below are my code I wrote for showing image from database when I click on image show as modal I wrote code from this aim but when I run code it work only for last item please suggest me any idea or solution

Bootstrap and PHP

<?php
    $stmt = $DB_con->prepare('SELECT ID, title, content, img FROM shop where lang="en" ORDER BY ID DESC');
    $stmt->execute();
    if($stmt->rowCount() > 0)
    {
        while($row=$stmt->fetch(PDO::FETCH_ASSOC))
        {
            extract($row);
?>
            <img id="myImg" src="admin/view/pages/en/shop/user_images/<?php echo $row['img']; ?>" alt="<?php echo $content; ?>" width="300" height="200">
<?php
        }
    }
?>
<!-- The Modal -->
<div id="myModal" class="modal">
    <span class="close">&times;</span>
    <img class="modal-content" id="img01">
    <div id="caption"></div>
</div>

JavaScript

<script>
    var modal = document.getElementById('myModal');
    var img = document.getElementById('myImg');
    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");
    img.onclick = function(){
        modal.style.display = "block";
        modalImg.src = this.src;
        captionText.innerHTML = this.alt;
    }
    //Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];
    //When the user clicks on <span> (x), close the modal
    span.onclick = function() { 
        modal.style.display = "none";
    }
</script>

Your images need to have unique IDs. I would recommend you to create a parent div of all your images. See below

<div id="parent_modal">
<?php
    $stmt = $DB_con->prepare('SELECT ID, title, content, img FROM shop where lang="en" ORDER BY ID DESC');
    $stmt->execute();
    if($stmt->rowCount() > 0)
    {
        while($row=$stmt->fetch(PDO::FETCH_ASSOC))
        {
            extract($row);
?>
            <img id="myImg<?php echo $row['id']; ?>" src="admin/view/pages/en/shop/user_images/<?php echo $row['img']; ?>" alt="<?php echo $content; ?>" width="300" height="200">
<?php
        }
    }
?>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
    <span class="close">&times;</span>
    <img class="modal-content" id="img01">
    <div id="caption"></div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
 <span class="close">&times;</span>
 <img class="modal-content" id="img01">
 <div id="caption"></div>
</div>

Then in javascript you select all children of the new div and detect onlcick event on them. Cannot test it right now but should work with little adjustments:

<script>
var modal = document.getElementById('myModal');
var img = document.getElementById('parent_modal').childNodes;
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for(var i=0; i<img.length; i++) {
    img[i].onclick = function() {
     modal.style.display = "block";
     modalImg.src = this.src;
     captionText.innerHTML = this.alt;
    }
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
modal.style.display = "none";
}
</script>

Cannot test this if it works right now, but this is how i understand it should be done. May be wrong though