title: switching getElementById to ClassName for creating popup does not work
body: <p>I'm probably going to get spanked for asking this but all the posts on this site are too technical for my meager knowledge of js.  I found code to create a popup of an image that I like, but since it uses getElementById it only works for the first image.  I tried switching to getElementsByClassName and made the global changes in the css and html using . not # etc., but this doesn't permit the additional images to pop up.  I did consult other posts on this site such as "How to switch a getElementById to getElementsByClassName" which was not clarifying for me since the answer advises to make a switch to code using getElementsByClassName even though the post's title references switching from getElementById.  Other posts were opaque as to how to update or edit the js to get what I need.  I appreciate any guidance.</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  &lt;script src="https://use.typekit.net/qkv6kzb.js"&gt;&lt;/script&gt;
  &lt;script&gt;try{Typekit.load({ async: true });}catch(e){}&lt;/script&gt;
      &lt;script src="https://use.typekit.net/qkv6kzb.js"&gt;&lt;/script&gt;
  &lt;script&gt;try{Typekit.load({ async: true });}catch(e){}&lt;/script&gt;
      &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Barton's website&lt;/title&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;!--[if lt IE 9]&gt;
  &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
  &lt;style&gt;
  
  .myImg {
      border-radius: 5px;
      cursor: pointer;
      transition: 0.3s;
  }
  
  #myImg:hover {opacity: 0.7;}
  
  /* The Modal (background) */
  .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 (image) */
  .modal-content {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 700px;
  }
  
  /* Caption of Modal Image */
  #caption {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 700px;
      text-align: center;
      color: #ccc;
      padding: 10px 0;
      height: 150px;
  }
  
  /* Add Animation */
  .modal-content, #caption {    
      -webkit-animation-name: zoom;
      -webkit-animation-duration: 0.6s;
      animation-name: zoom;
      animation-duration: 0.6s;
  }
  
  @-webkit-keyframes zoom {
      from {-webkit-transform:scale(0)} 
      to {-webkit-transform:scale(1)}
  }
  
  @keyframes zoom {
      from {transform:scale(0)} 
      to {transform:scale(1)}
  }
  
  /* The Close Button */
  .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;
  }
  
  /* 100% Image Width on Smaller Screens */
  @media only screen and (max-width: 700px){
      .modal-content {
          width: 100%;
      }
  }
  
  .gallery {
      width: auto;  
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: ;
      border: 2px black solid;
  }
  .photo {
      border: 20px red solid;
      padding: 20px;
      }
  .photo img {
      padding: 50px;
      padding-bottom: 25px;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;section class="gallery"&gt;
          &lt;table class="photo" width= height=&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;img id="myImg" class="photobox" src="http://www.bartonlewisfilm.com/img_262-109.jpg" alt="262-109, 67th Ave., Queens Boulevard Line" width="256" height="171" /&gt;
  
              &lt;!-- The Modal --&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;&lt;/td&gt;
  
              &lt;td&gt;&lt;img id="myImg" class="photobox" src="http://www.bartonlewisfilm.com/img_262-197.jpg" alt="262-197, 67th Ave., Queens Boulevard Line" width="256" height="171" /&gt;
  
              &lt;!-- The Modal --&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;&lt;/td&gt; 
  
              &lt;td&gt;&lt;img id="myImg" class="photobox" src="http://www.bartonlewisfilm.com/img_287-153.jpg" alt="287-153, Flushing Ave., IND Crosstown Line" width="256" height="171" /&gt;
  
              &lt;!-- The Modal --&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;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/section&gt;
  
    &lt;script&gt;
  // 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");
  var captionText = document.getElementById("caption");
  img.onclick = function(){
      modal.style.display = "block";
      modalImg.src = this.src;
      captionText.innerHTML = this.alt;
  }
  
  // Get the &lt;span&gt; element that closes the modal
  var span = document.getElementsByClassName("close")[0];
  
  // When the user clicks on &lt;span&gt; (x), close the modal
  span.onclick = function() { 
      modal.style.display = "none";
  }
  &lt;/script&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>