title: Creating multiple pop up buttons
body: <p>so I'm currently having an issue with creating multiple popups with multiple buttons. I have multiple buttons up but when I click them they all show the same pop-up. How do I assign different pop-ups to each button? I feel like I've tried everything and I can't seem to figure it out. Any help would be greatly appreciated.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function togglePopup(){
  document.getElementById("popup-1").classList.toggle("active");
  document.getElementById("popup-2").classList.toggle("active");
  document.getElementById("popup-3").classList.toggle("active");
  document.getElementById("popup-4").classList.toggle("active");
  document.getElementById("popup-5").classList.toggle("active");
  document.getElementById("popup-6").classList.toggle("active");
  document.getElementById("popup-7").classList.toggle("active");
  document.getElementById("popup-8").classList.toggle("active");
  document.getElementById("popup-9").classList.toggle("active");
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.popup .overlay {
      position:fixed;
      top:0px;
      left:0px;
      width:100vw;
      height:100vh;
      background:rgba(0,0,0,0.7);
      z-index:1;
      display:none;
  }
  
  .popup .content {
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%) scale(0);
      background:#fff;
      width:350px;
      height: 220px;
      z-index:2;
      text-align:center;
      padding:20px;
      box-sizing:border-box;
  }
  
  .popup .close-btn{
      cursor:pointer;
      position:absolute;
      right: 20px;
      top:20px;
      width:30px;
      height:30px;
      background: #222;
      color: #fff;
      font-size:25px;
      font-weight:600;
      line-weight:30px;
      text-align:center;
      border-radius:50%;
      
  }
  
  .popup.active .overlay{
      display:block;
  }
  
  .popup.active .content{
      transition:all 300ms ease-in-out;
      transform:translate(-50%,-50%) scale(1);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="popup" id="popup-1"&gt;
      &lt;div class="overlay"&gt;&lt;/div&gt;
  &lt;div class="content"&gt;
  &lt;div class="close-btn" onclick="togglePopup()"&gt;&amp;times;&lt;/div&gt;
      &lt;h2&gt; Fun Fact 1&lt;/h2&gt;
  Portuguese is the official language of 9 countries.      
      
    &lt;/div&gt;
      &lt;/div&gt;
      
      &lt;div class="popup" id="popup-2"&gt;
      &lt;div class="overlay"&gt;&lt;/div&gt;
  &lt;div class="content"&gt;
  &lt;div class="close-btn" onclick="togglePopup()"&gt;&amp;times;&lt;/div&gt;
      &lt;h2&gt; Fun Fact 2&lt;/h2&gt;     
      
    &lt;/div&gt;
      &lt;/div&gt;
      
          &lt;div class="popup" id="popup-3"&gt;
      &lt;div class="overlay"&gt;&lt;/div&gt;
  &lt;div class="content"&gt;
  &lt;div class="close-btn" onclick="togglePopup()"&gt;&amp;times;&lt;/div&gt;
      &lt;h2&gt; Fun Fact 3&lt;/h2&gt;     
      
    &lt;/div&gt;
      &lt;/div&gt;
      
          &lt;div class="popup" id="popup-4"&gt;
      &lt;div class="overlay"&gt;&lt;/div&gt;
  &lt;div class="content"&gt;
  &lt;div class="close-btn" onclick="togglePopup()"&gt;&amp;times;&lt;/div&gt;
      &lt;h2&gt; Fun Fact 4&lt;/h2&gt;    
      
    &lt;/div&gt;
      &lt;/div&gt;
      
          &lt;div class="popup" id="popup-5"&gt;
      &lt;div class="overlay"&gt;&lt;/div&gt;
  &lt;div class="content"&gt;
  &lt;div class="close-btn" onclick="togglePopup()"&gt;&amp;times;&lt;/div&gt;
      &lt;h2&gt; Fun Fact 5&lt;/h2&gt;
      
    &lt;/div&gt;
      &lt;/div&gt;
      
          &lt;div class="popup" id="popup-6"&gt;
      &lt;div class="overlay"&gt;&lt;/div&gt;
  &lt;div class="content"&gt;
  &lt;div class="close-btn" onclick="togglePopup()"&gt;&amp;times;&lt;/div&gt;
      &lt;h2&gt; Fun Fact 6&lt;/h2&gt;
      
    &lt;/div&gt;
      &lt;/div&gt;
      
          &lt;div class="popup" id="popup-7"&gt;
      &lt;div class="overlay"&gt;&lt;/div&gt;
  &lt;div class="content"&gt;
  &lt;div class="close-btn" onclick="togglePopup()"&gt;&amp;times;&lt;/div&gt;
      &lt;h2&gt; Fun Fact 7&lt;/h2&gt;
      
    &lt;/div&gt;
      &lt;/div&gt;
      
          &lt;div class="popup" id="popup-8"&gt;
      &lt;div class="overlay"&gt;&lt;/div&gt;
  &lt;div class="content"&gt;
  &lt;div class="close-btn" onclick="togglePopup()"&gt;&amp;times;&lt;/div&gt;
      &lt;h2&gt; Fun Fact 8&lt;/h2&gt;
      
    &lt;/div&gt;
      &lt;/div&gt;
      
          &lt;div class="popup" id="popup-9"&gt;
      &lt;div class="overlay"&gt;&lt;/div&gt;
  &lt;div class="content"&gt;
  &lt;div class="close-btn" onclick="togglePopup()"&gt;&amp;times;&lt;/div&gt;
      &lt;h2&gt; Fun Fact 9&lt;/h2&gt;
      
    &lt;/div&gt;
      &lt;/div&gt;
      
      
  &lt;div class="btn-container"&gt;
              &lt;button onclick="togglePopup()" class="btn btn1"&gt;Un&lt;/button&gt;
              &lt;button onclick="togglePopup()" class="btn btn2"&gt;Dois&lt;/button&gt;
              &lt;button onclick="togglePopup()" class="btn btn3"&gt;Tres&lt;/button&gt;
          &lt;br&gt;&lt;br&gt;
              &lt;button onclick="togglePopup()" class="btn btn4"&gt;Quatro&lt;/button&gt;
              &lt;button onclick="togglePopup()" class="btn btn5"&gt;Cinco&lt;/button&gt;
              &lt;button onclick="togglePopup()" class="btn btn6"&gt;Seis&lt;/button&gt;
          &lt;br&gt;&lt;br&gt;
              &lt;button onclick="togglePopup()" class="btn btn7"&gt;Sete&lt;/button&gt;
              &lt;button onclick="togglePopup()" class="btn btn8"&gt;Oito&lt;/button&gt;
              &lt;button onclick="togglePopup()" class="btn btn9"&gt;Nove&lt;/button&gt;
      &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>