title: Several Modal Images on page
body: <p>I'm new with JS, I'm trying to use 2 modal images on same page with this code:</p>
  
  <p><a href="https://www.w3schools.com/howto/howto_css_modal_images.asp" rel="nofollow noreferrer">https://www.w3schools.com/howto/howto_css_modal_images.asp</a></p>
  
  <p>With this HTML, JS and CSS view resizing works only for one image, not sure how to make it work for two images on same page: </p>
  
  <p>I have first html code two times for each image: </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;img id="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200"&gt;
  &lt;div id="myModal" class="modal"&gt;
    &lt;span class="close"&gt;&amp;times;&lt;/span&gt;
    &lt;img class="modal-content" id="img01"&gt;
    &lt;div id="caption"&gt;&lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>CSS in big-picture.css:</p>
  
  <pre><code>#myImg {
      border-radius: 5px;
      cursor: pointer;
      transition: 0.3s;
  }
  
  #myImg:hover {opacity: 0.7;}
  
  .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      padding-top: 100px; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  }
  
  .modal-content {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 700px;
  }
  
  #caption {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 700px;
      text-align: center;
      color: #ccc;
      padding: 10px 0;
      height: 150px;
  }
  
  .modal-content, #caption {
      animation-name: zoom;
      animation-duration: 0.6s;
  }
  
  @keyframes zoom {
      from {transform:scale(0)}
      to {transform:scale(1)}
  }
  
  .close {
      position: absolute;
      top: 15px;
      right: 35px;
      color: #f1f1f1;
      font-size: 40px;
      font-weight: bold;
      transition: 0.3s;
  }
  
  .close:hover,
  .close:focus {
      color: #bbb;
      text-decoration: none;
      cursor: pointer;
  }
  
  @media only screen and (max-width: 700px){
      .modal-content {
          width: 100%;
      }
  } 
  </code></pre>
  
  <p>and JS:</p>
  
  <pre><code>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;
  }
  
  var span = document.getElementsByClassName("close")[0];
  
  span.onclick = function() {
    modal.style.display = "none";
  } 
  </code></pre>