Javascript 如何分别为所有循环图像启用图像视图

我有获取图像的代码，如果我在图像视图中单击该图像，则问题是第一个图像，图像视图仅工作其他图像，图像视图不工作我知道我的JavaScript代码有问题，但我不知道如何修复，请帮助我如何修复并使其工作

注意：

每个帖子都有不同的图片和相同的id

<?php echo $p_id; ?> this id will change for all images.

“alt=”“class=“newsize”id=“myImg”>
&时代；

这应该可以完成以下工作：
PHP（将模型置于循环之外）

“alt=”“class=“newsize”id=“myImg”onclick=“showModel（事件）；”>
&时代；
关闭模态的元素
var span=document.getElementsByClassName（“closeimage”）[0]；
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
}
}

您需要使用类而不是ID！ID总是唯一的！你能给我举个例子吗？有人能帮我修改一下我的代码吗

 <?php
while ($mLibary = mysqli_fetch_assoc($getMlibary)) {
  extract($mLibary);
  ?>
  <span>
    <img src="<?php echo $u_pimg;?>" alt="" class="newsize" id="myImg" onclick="showModel(event);">
  </span>


<?php } ?>

<div id="myModal" class="modalimage">
    <span class="closeimage">&times;</span>
    <img class="modalimage-content" id="img01">
    <div id="caption"></div>
  </div>

<script>
  function showModel(ev){
    var modal = document.getElementById('myModal');

    // Get the image and insert it inside the modal - use its "alt" text as a caption
    var img = ev.target;
    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");
    img.onclick = function() {
      modal.style.display = "block";
      modalImg.src = img.src;
      captionText.innerHTML = img.alt;
    }

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("closeimage")[0];

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
      modal.style.display = "none";
    }
   }
 }
</script>