title: Multiple modals on one page with incremental CSS ids
body: <p>I have more than eight modals on one page, each with a unique CSS id. I was using the following javascript when only using one modal, but it doesn't target each CSS id. Without knowing much javascript, I'd like to know how to target each modal dynamically with a counter variable.</p>
  
  <pre><code>&lt;button class="fsc-modal-button"&gt;Read Bio&lt;/button&gt;
  &lt;div class="fsc-modal" id="fsc-modal-1"&gt;
      &lt;div class="fsc-modal-content"&gt;&lt;span class="fsc-modal-close"&gt;×&lt;/span&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;button class="fsc-modal-button"&gt;Read Bio&lt;/button&gt;
  &lt;div class="fsc-modal" id="fsc-modal-2"&gt;
      &lt;div class="fsc-modal-content"&gt;&lt;span class="fsc-modal-close"&gt;×&lt;/span&lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
  var button = document.getElementsByClassName('fsc-modal-button')[0];
  var modal = document.getElementsByClassName('fsc-modal')[0];
  var span = document.getElementsByClassName('fsc-modal-close')[0];
  
  button.onclick = function() {
      modal.style.display = "block";
  }
  
  span.onclick = function() {
      modal.style.display = "none";
  }
  
  window.onclick = function(event) {
      if (event.target == modal) {
          modal.style.display = "none";
      }
  }
  &lt;/script&gt;
  </code></pre>