title: how do I create multiple modal boxes in a loop
body: <p>I'm creating a personal portfolio website using just HTML/CSS/JS. Follows the grid template <a href="https://glitch.com/edit/#!/grid-cats" rel="nofollow noreferrer">here</a>. I've included the additional functionality of opening a Modal box when the user clicks on each <code>article-class</code>, which are the <code>class="modal"</code> elements. Clicking to open, or clicking on the 'X' to close, is handled by JS. Just the <code>&lt;body&gt;</code>:</p>
  
  <pre><code>&lt;body&gt;
      &lt;main&gt;
          &lt;section class="leading"&gt;
            &lt;p class="leading-bigtext"&gt;Big Headline Text&lt;/p&gt;
          &lt;/section&gt;
  
          &lt;section class="cards"&gt;
            &lt;article id="article1" class="article-class"&gt;
              &lt;img class="article-img" src="http://placekitten.com/305/205" alt=" " /&gt;
              &lt;h1 class="article-title"&gt;
                  Article Headline 1
              &lt;/h1&gt;
            &lt;/article&gt;
  
            &lt;article id="article2" class="article-class"&gt;
              &lt;img class="article-img" src="http://placekitten.com/320/220" alt=" " /&gt;
              &lt;h1 class="article-title"&gt;
                  Article Headline 2
              &lt;/h1&gt;
            &lt;/article&gt;
  
            &lt;article id="article3" class="article-class"&gt;
              &lt;img class="article-img" src="http://placekitten.com/280/250" alt=" " /&gt;
              &lt;h1 class="article-title"&gt;
                  Article Headline 3
              &lt;/h1&gt;
            &lt;/article&gt;
  
            &lt;article id="article4" class="article-class"&gt;
              &lt;img class="article-img" src="http://placekitten.com/430/240" alt=" " /&gt;
              &lt;h1 class="article-title"&gt;
                  Article Headline 4
              &lt;/h1&gt;
            &lt;/article&gt;
          &lt;/section&gt;
  
        &lt;!-- ==================== The Modals ==================== --&gt;
        &lt;div id="myModal" class="modal"&gt;
          &lt;div class="modal-content"&gt;
            &lt;span class="close"&gt;&amp;times;&lt;/span&gt;
            &lt;h1&gt;Article Title 1&lt;/h1&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. &lt;/p&gt;
            &lt;a href="https://github.com/Don86/microscopy-image-analysis" target="_blank" class="tooltip"&gt;
              &lt;img src="./assets/GitHub-Mark-120px-plus.png" height="32" width="32"/&gt;
              &lt;span class="tooltiptext"&gt;Link to Github repo&lt;/span&gt;
          &lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div id="myModal2" class="modal"&gt;
          &lt;div class="modal-content"&gt;
            &lt;span class="close"&gt;&amp;times;&lt;/span&gt;
            &lt;h1&gt;Article Title 2&lt;/h1&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div id="myModal3" class="modal"&gt;
          &lt;div class="modal-content"&gt;
            &lt;span class="close"&gt;&amp;times;&lt;/span&gt;
            &lt;h1&gt;Article Title 3&lt;/h1&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div id="myModal4" class="modal"&gt;
          &lt;div class="modal-content"&gt;
            &lt;span class="close"&gt;&amp;times;&lt;/span&gt;
            &lt;h1&gt;Article Title 4&lt;/h1&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/main&gt;
  
      &lt;script&gt;
        var modal = document.getElementById('myModal');
        var modal2 = document.getElementById('myModal2');
        var modal3 = document.getElementById('myModal3');
        var modal4 = document.getElementById('myModal4');
        // Get the button that opens the modal
        var btn = document.getElementById("article1");
        var btn2 = document.getElementById("article2");
        var btn3 = document.getElementById("article3");
        var btn4 = document.getElementById("article4");
        // Get the &lt;span&gt; element that closes the modal
        var span = document.getElementsByClassName("close")[0];
        var span2 = document.getElementsByClassName("close")[1];
        var span3 = document.getElementsByClassName("close")[2];
        var span4 = document.getElementsByClassName("close")[3];
  
        // When the user clicks the button, open the modal
        btn.onclick = function() {modal.style.display = "block";}
        btn2.onclick = function() {modal2.style.display = "block";}
        btn3.onclick = function() {modal3.style.display = "block";}
        btn4.onclick = function() {modal4.style.display = "block";}
        // When the user clicks on &lt;span&gt; (x), close the modal
        span.onclick = function() {modal.style.display = "none";}
        span2.onclick = function() {modal2.style.display = "none";}
        span3.onclick = function() {modal3.style.display = "none";}
        span4.onclick = function() {modal4.style.display = "none";}
        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
          if (event.target == modal) {
            modal.style.display = "none";
          }
        }
        window.onclick = function(event) {
          if (event.target == modal2) {
            modal2.style.display = "none";
          }
        }
        window.onclick = function(event) {
          if (event.target == modal3) {
            modal3.style.display = "none";
          }
        }
        window.onclick = function(event) {
          if (event.target == modal4) {
            modal4.style.display = "none";
          }
        }
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>This works, but the <code>&lt;script&gt;</code> portion is ugly because it consists of a lot of repeated code. Every time I add a new <code>article</code>, I'd have to copy-paste the same lines of code again. I've tried using <code>for-loops</code> and <code>map</code>, but I must have not implemented things correctly, but in any case it's had to instantiate variables in a loop (without overriding the same variable over and over again). Is there a way to do this more elegantly?</p>
  
  <p>The CSS for completeness:</p>
  
  <pre><code>@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,900i');
  
  header {
      display: flex;
      align-items: center;
  }
  @media (min-width: 600px) {
      .leading {
          display: flex;
          align-items: center;
      }
  }
  
  /* Grid styles */
  .cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      grid-gap: 30px;
    }
  
  /* generic styles */
  body {
    font-family: 'Quicksand', sans-serif;
  }
  
  /*header class not used*/
  header {
    padding: 8px;
    font-size: 0.5em;
    color: white;
    background-color: #333;
  }
  
  .logo {
    height: 50px;
    margin-right: 20px;
  }
  
  .leading {
    height: 200px;
    margin-bottom: 30px;
    padding: 30px;
    color: black;
    background-size: cover;
    font-family: "Playfair Display"
  }
  
  .leading-bigtext {
    margin-right: 40px;
    font-weight: bold;
    font-size: 10vw;
  }
  
  @media (min-width: 700px) {
    .leading-bigtext {
      font-size: 60px;
    }
  }
  
  .leading-text {
    max-width: 900px;
    font-size: 1.2em;
    line-height: 1.4em;
  }
  
  .cards {
    max-width: 900px;
    margin: 0 auto 30px;
  }
  
  article {
    cursor: pointer; /* chance cursor to a hand to prompt click-thru */
    position: relative;
    transition: 0.3s;
    font-family: "Playfair Display", serif;
    border-style: solid;
    border-width: 1px;
    border-color: lightgrey;
  }
  
  article:hover {
      box-shadow: 7px 7px 4px #aaaaaa;
      opacity: 0.7;
  }
  
  .article-img {
    height: 200px;
    width: 100%;
    object-fit: cover;
  }
  
  .article-title {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 12px;
    background-color: rgba(255, 255, 255, 0.8);
  }
  
  /* ==================== Modal css ==================== */
  .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.4); /* Black w/ opacity */
  }
  
  /* Modal Content */
  .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
  }
  
  /* The Close Button */
  .close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  
  /* Add Animation */
  @-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
  }
  
  @keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
  }
  </code></pre>