Multiple Modal Image Effect !HELP!

[ayano32]

Hi! 
I am building a project to practice what I learned in the courses. I am using a gallery of images. My idea is that when you click on an image a
bigger or another image pops up. I got it to work on one image. But I can't make it work on multiple images. I tried adjusting the JavaScript
In multiple ways with no luck. 

HTML

    <!-- Image with pop-up #0 --> // the effect only works with this image ...
    <img id="myImg" src="img/explr-imgs/1.jpg" alt="Snow"> // image you click on

    <!-- Modal image pop-up #0 -->
    <div id="myModal" class="modal">
      <span class="close">×</span>
      <img class="modal-content" id="img01" src="img/explr-imgs/3.jpg"> // image that pops-up
      <div id="caption"></div>
    </div>


    <!-- Image with pop-up #1 --> ... it doesn't work on the second image.
    <img id="myImg" src="img/explr-imgs/2.jpg" alt="Snow"> // image you click on

    <!-- Modal image pop-up #1 -->
    <div id="myModal" class="modal">
      <span class="close">×</span>
      <img class="modal-content" id="img01" src="img/explr-imgs/4.jpg"> // image that pops-up
      <div id="caption"></div>
    </div>

JS

// Get the modal =========================================================== //
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01"); // It displays the image with this id, the problem is that it only works with this id. That is what I think.
var captionText = document.getElementById("caption");


img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = modalImg.src.replace();
  captionText.innerHTML = this.alt;
}

If you need additional information please let me know!