title: How to use addEventListener() , querySelectorAll and getElementsByClassName for popup box
body: <p>I would like to put a popup box on my website which have same ID. Those pop up boxes should be display after I clicked button. Those buttons have same Id.</p>
  
  <p>my script code is</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      // Get modal element
  var modal = document.querySelectorAll('.simpleModal');
  // Get open modal button
  var modalBtn = document.querySelectorAll('.modalBtn');
  // Get close button
  var closeBtn = document.querySelectorAll('.closeBtn')[0];
  
  for (var i = 0; i &lt; modalBtn.length; i++) {
         modalBtn[i].addEventListener('click', openModal);
          // Listen for close click
         closeBtn[i].addEventListener('click', closeModal);
         window.addEventListener('click', outsideClick);
      }
  
  function openModal(){
    modal.style.display = 'block';
  }
  
  // Function to close modal
  function closeModal(){
    modal.style.display = 'none';
  }
  
  // Function to close modal if outside click
  function outsideClick(e){
    if(e.target == modal){
      modal.style.display = 'none';
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>My HTML code is below I mentioned This code using derived the data from database.</p>
  
  <pre><code>&lt;?php echo"&lt;a href='single.php'&gt;&lt;img title=' ' alt=' ' src='images/$row2[pic]'&gt;&lt;/a&gt;
              &lt;p&gt;Cookware&lt;/p&gt;
              &lt;h4&gt;$ $row2[price] &lt;span&gt;$45.00&lt;/span&gt;&lt;/h4&gt;"?&gt;
          &lt;/div&gt;
  
          &lt;?php echo"
          &lt;button  class='modalBtn button'&gt;Details&lt;/button&gt;
            &lt;div class='simpleModal modal'&gt;
              &lt;div class='modal-content'&gt;
                &lt;div class='modal-header'&gt;
                    &lt;span class='closeBtn'&gt;&amp;times;&lt;/span&gt;
                   &lt;h2&gt;Modal Header&lt;/h2&gt;
                &lt;/div&gt;
                &lt;div class='modal-body'&gt;
                  &lt;p&gt;$row2[name]&lt;/p&gt;
                  &lt;p&gt;$row2[description]&lt;/p&gt;
                &lt;/div&gt;
                &lt;div class='modal-footer'&gt;
                  &lt;h3&gt;Modal Footer&lt;/h3&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
      &lt;/div&gt;"?&gt;
  </code></pre>
  
  <p>My HTML code</p>
  
  <pre><code>&lt;div class="agile_top_brands_grids"&gt;                      
      &lt;div class="col-md-4 top_brand_left"&gt;
          &lt;div class="hover14 column"&gt;
              &lt;div class="agile_top_brand_left_grid"&gt;
                  &lt;div class="agile_top_brand_left_grid_pos"&gt;
                      &lt;img src="images/offer.png" alt=" " class="img-responsive"&gt;
                  &lt;/div&gt;
                  &lt;div class="agile_top_brand_left_grid1"&gt;
                      &lt;figure&gt;
                          &lt;div class="snipcart-item block"&gt;
                              &lt;div class="snipcart-thumb"&gt;
                                  &lt;a href='single.php'&gt;&lt;img title=' ' alt=' ' src='images/c.png'&gt;&lt;/a&gt;
                                  &lt;p&gt;Cookware&lt;/p&gt;
                                  &lt;h4&gt;452&lt;span&gt;$45.00&lt;/span&gt;&lt;/h4&gt;"?&gt;
                              &lt;/div&gt;
  
                              &lt;button id='modalBtn'  class=' button'&gt;Details&lt;/button&gt;
                                &lt;div id='simpleModal'  class=' modal'&gt;
                                  &lt;div class='modal-content'&gt;
                                    &lt;div class='modal-header'&gt;
                                        &lt;span class='closeBtn'&gt;&amp;times;&lt;/span&gt;
                                       &lt;h2&gt;Modal Header&lt;/h2&gt;
                                    &lt;/div&gt;
                                    &lt;div class='modal-body'&gt;
                                      &lt;p&gt;biscuit&lt;/p&gt;
                                      &lt;p&gt;tasty food&lt;/p&gt;
                                    &lt;/div&gt;
                                    &lt;div class='modal-footer'&gt;
                                      &lt;h3&gt;Modal Footer&lt;/h3&gt;
                                    &lt;/div&gt;
                                  &lt;/div&gt;
                                &lt;/div&gt;
  
                                &lt;button id='modalBtn' class=' button'&gt;Details&lt;/button&gt;
                                &lt;div id='simpleModal' class=' modal'&gt;
                                  &lt;div class='modal-content'&gt;
                                    &lt;div class='modal-header'&gt;
                                        &lt;span class='closeBtn'&gt;&amp;times;&lt;/span&gt;
                                       &lt;h2&gt;Modal Header&lt;/h2&gt;
                                    &lt;/div&gt;
                                    &lt;div class='modal-body'&gt;
                                      &lt;p&gt;biscuit&lt;/p&gt;
                                      &lt;p&gt;tasty food&lt;/p&gt;
                                    &lt;/div&gt;
                                    &lt;div class='modal-footer'&gt;
                                      &lt;h3&gt;Modal Footer&lt;/h3&gt;
                                    &lt;/div&gt;
                                  &lt;/div&gt;
                                &lt;/div&gt;
  
                                &lt;button id='modalBtn' class=' button'&gt;Details&lt;/button&gt;
                                &lt;div id='simpleModal' class=' modal'&gt;
                                  &lt;div class='modal-content'&gt;
                                    &lt;div class='modal-header'&gt;
                                        &lt;span class='closeBtn'&gt;&amp;times;&lt;/span&gt;
                                       &lt;h2&gt;Modal Header&lt;/h2&gt;
                                    &lt;/div&gt;
                                    &lt;div class='modal-body'&gt;
                                      &lt;p&gt;biscuit&lt;/p&gt;
                                      &lt;p&gt;tasty food&lt;/p&gt;
                                    &lt;/div&gt;
                                    &lt;div class='modal-footer'&gt;
                                      &lt;h3&gt;Modal Footer&lt;/h3&gt;
                                    &lt;/div&gt;
                                  &lt;/div&gt;
                                &lt;/div&gt;
  
                                &lt;button id='modalBtn' class=' button'&gt;Details&lt;/button&gt;
                                &lt;div id='simpleModal' class='modal'&gt;
                                  &lt;div class='modal-content'&gt;
                                    &lt;div class='modal-header'&gt;
                                        &lt;span class='closeBtn'&gt;&amp;times;&lt;/span&gt;
                                       &lt;h2&gt;Modal Header&lt;/h2&gt;
                                    &lt;/div&gt;
                                    &lt;div class='modal-body'&gt;
                                      &lt;p&gt;biscuit&lt;/p&gt;
                                      &lt;p&gt;tasty food&lt;/p&gt;
                                    &lt;/div&gt;
                                    &lt;div class='modal-footer'&gt;
                                      &lt;h3&gt;Modal Footer&lt;/h3&gt;
                                    &lt;/div&gt;
                                  &lt;/div&gt;
                                &lt;/div&gt;
  
                                &lt;button  id'modalBtn' class=' button'&gt;Details&lt;/button&gt;
                                &lt;div id='simpleModal' class=' modal'&gt;
                                  &lt;div class='modal-content'&gt;
                                    &lt;div class='modal-header'&gt;
                                        &lt;span class='closeBtn'&gt;&amp;times;&lt;/span&gt;
                                       &lt;h2&gt;Modal Header&lt;/h2&gt;
                                    &lt;/div&gt;
                                    &lt;div class='modal-body'&gt;
                                      &lt;p&gt;biscuit&lt;/p&gt;
                                      &lt;p&gt;tasty food&lt;/p&gt;
                                    &lt;/div&gt;
                                    &lt;div class='modal-footer'&gt;
                                      &lt;h3&gt;Modal Footer&lt;/h3&gt;
                                    &lt;/div&gt;
                                  &lt;/div&gt;
                                &lt;/div&gt;
                          &lt;/div&gt;
  
                      &lt;/figure&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>