Image Modal only works with the first

Question

I have a modal of images but only works with the first one, can anyone help me ? see the modal here: https://jsfiddle.net/pnavtmcx/

Answer 1

The problem is that the two images have the same ID and is an attribute that should be unique. One option is to create any attribute and select the elements by querySelector:

Would look like this:

HTML

<img id="myImg1" get-img alt="Texto qualquer" width="300" height="200">
<img id="myImg2" get-img alt="Texto qualquer" width="300" height="200">

Javascript:

var imgs = document.querySelectorAll('[get-img]');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");

for (var i = 0 ; i < imgs.length ; i++){
  imgs[i].onclick = function(){
      modal.style.display = "block";
      modalImg.src = this.src;
      captionText.innerHTML = this.alt;
  }
}

Jsfiddle: https://jsfiddle.net/pnavtmcx/6/

Answer 2

id is an attribute that must be assigned to only one element, change its code to use the image class as the javascript target.

Classes are used precisely to interact with more than one element in the DOM.

var x = document.getElementsByClassName("example");

Something like this, in X you get all the elements with that class in an array, which starts with index 0.