title: Javascript pop up window - need to create class and bind event to every element returned by document.getElementsByClassName
body: <p>I made a pop up window on my site and it is assigned to three buttons but I have the same ID on all buttons so when I click the third button to open the pop-up it is giving me the first pop-up, same with the second button.</p>
  
  <p>I put a similar question to this up already but with the feedback and answers I got, I couldn't implement them as I am new to javascript and do not have much experience so I was trying to fix it for hours and I am still having no luck.</p>
  
  <p>here is the javascript:</p>
  
  <pre><code>var modal = document.getElementById('myModal');
  
  var btns = document.getElementsByClassName("myBtn");
  
  var showModal = function() {
      modal.style.display = "block";
  };
  
  for (var i = 0; i &lt; btns.length; i++) {
      btns[i].addEventListener('click', showModal, false);
  }
  
  var span = document.getElementsByClassName("close")[0];
  
  
  span.onclick = function() {
      modal.style.display = "none";
  }
  
  window.onclick = function(event) {
      if (event.target == modal) {
          modal.style.display = "none";
      }
      }
  </code></pre>
  
  <p>Here is the html:</p>
  
  <pre><code>&lt;footer class="panel-footer"&gt;
    &lt;div class="btn btn-block btn-lg btn-default"&gt;
      &lt;button id="myBtn"&gt;Sign up now&lt;/button&gt;
      &lt;div id="myModal" class="modal"&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
            &lt;span class="close"&gt;×&lt;/span&gt;
            &lt;h2&gt;&lt;img src="http://localhost:8383/homepage/img/logo.png" style="width:250px"&gt;&lt;/h2&gt;
          &lt;/div&gt;
  
          &lt;div class="modal-body"&gt;
            &lt;h4&gt;&lt;b&gt;&lt;u&gt;Sign up for a basic subscription&lt;/u&gt;&lt;/b&gt;&lt;/h4&gt;&lt;br&gt;
            &lt;form method="post" action="contact_basic.php" name="contactform" id="contactform"&gt;
              &lt;div class="results"&gt;&lt;/div&gt;
              &lt;div class="row"&gt;
                &lt;div class="col-sm-6"&gt;
                  &lt;div class="form-group"&gt;
                    &lt;label class="sr-only"&gt;Name&lt;/label&gt;
                    &lt;input name="name" type="text" class="form-control input-lg" placeholder="Name" required&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                    &lt;label class="sr-only"&gt;Email&lt;/label&gt;
                    &lt;input name="email" type="email" class="form-control input-lg" placeholder="Email" required&gt;
                  &lt;/div&gt;
  
                &lt;/div&gt;
                &lt;div class="col-sm-6"&gt;
                  &lt;div class="form-group"&gt;
                    &lt;label class="sr-only"&gt;Phone Number&lt;/label&gt;
                    &lt;input name="phone" type="number" class="form-control input-lg" placeholder="Phone Number" required&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="col-sm-6"&gt;
                  &lt;div class="form-group"&gt;
                    &lt;label class="sr-only"&gt;Organization Name&lt;/label&gt;
                    &lt;input name="orgName" type="text" class="form-control input-lg" placeholder="Organization Name"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="col-sm-3 col-xs-12"&gt;
                  &lt;button id="submit" type="submit" align="center" class="btn btn-danger btn-lg btn-block"&gt;Send&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/footer&gt;
  </code></pre>