Modal image only working on 1 image - php

Question

I would like to understand why my modal image is only working on the 1st image on my page. and not all of them in the array.
I have attached the Script, CSS and HTML as well as a link to the site.
http://jarrettonions.co.za/
Thanks for the help
Dylan
<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;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>
Html for the Images
<?php
require 'connect.php';
$sql = "SELECT * FROM art ORDER BY hits DESC";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo
"<div class='art'>
<img id='myImg' src='img/".$row["name"]."_tnail.jpg' alt='".$row["name"]." • ".$row["year"]." • ".$row["type"]."' title='".$row["name"]." • ".$row["year"]." • ".$row["type"]."' height='auto' width='100%'/>
<div id='myModal' class='modal'>
<span class='close'>×</span>
<img class='modal-content' id='img01'>
<div id='caption'></div>
</div>
</div>"
;
}
} else {
echo "0 results";
}
$conn->close();
?>
Then for the index page it just calls the art.php file and contains the Script

Answer 1

Having same ID multiple times is not valid html according to the W3C specification.
jQuery uses document.getElementById method, which returns only the first element with that ID.
So, you should never have two elements on the same page with the same ID. If you need it use a 'class' instead.
Just take a 'class' instead of 'id' in your img tag
and use document.getElementsByClassName instead of document.getElementById in your javascript.
Hope it will help you.