title: How to have multiple buttons calling same JavaScript
body: <p>I'm wondering why the first button works and the last three buttons don't in this problem I am having.</p>
  
  <p><a href="http://jsfiddle.net/j4c7U/387/" rel="nofollow">http://jsfiddle.net/j4c7U/387/</a></p>
  
  <p>It would be great if I could get any pointers in where I am going wrong and how I can fix it.</p>
  
  <p>Thanks</p>
  
  <p>JS:</p>
  
  <pre><code>window.onload = function() {
    document.getElementById("LearnMoreBtn").onclick = function(){
          var overlay = document.getElementById("overlay");
          var popup = document.getElementById("popup");
          overlay.style.display = "block";
          popup.style.display = "block";
  };
  
    document.getElementById("CloseBtn").onclick = function(){
          var overlay = document.getElementById("overlay");
          var popup = document.getElementById("popup");
          overlay.style.display = "none";
          popup.style.display = "none";      
    }
  };
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button id="LearnMoreBtn"&gt;Learn More&lt;/button&gt;
  &lt;div id="overlay"&gt;&lt;/div&gt;
  &lt;div id="popup"&gt;
      Popup contents here
      &lt;button id="CloseBtn"&gt;ClosePopup&lt;/button&gt;
  &lt;/div&gt;
  &lt;div&gt;
  some other content that will be behind the popup
  &lt;/div&gt;&lt;button id="LearnMoreBtn"&gt;Learn More&lt;/button&gt;
  &lt;div id="overlay"&gt;&lt;/div&gt;
  &lt;div id="popup"&gt;
      Popup contents here
       &lt;button id="CloseBtn"&gt;ClosePopup&lt;/button&gt;
  &lt;/div&gt;
  &lt;div&gt;
      some other content that will be behind the popup
  &lt;/div&gt;&lt;button id="LearnMoreBtn"&gt;Learn More&lt;/button&gt;
  &lt;div id="overlay"&gt;&lt;/div&gt;
  &lt;div id="popup"&gt;
      Popup contents here
      &lt;button id="CloseBtn"&gt;ClosePopup&lt;/button&gt;
  &lt;/div&gt;
  &lt;div&gt;
  some other content that will be behind the popup
  &lt;/div&gt;&lt;button id="LearnMoreBtn"&gt;Learn More&lt;/button&gt;
  &lt;div id="overlay"&gt;&lt;/div&gt;
  &lt;div id="popup"&gt;
  Popup contents here
  &lt;button id="CloseBtn"&gt;ClosePopup&lt;/button&gt;
  &lt;/div&gt;
  &lt;div&gt;
  some other content that will be behind the popup
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#overlay {
  display:none;    
  position:fixed;  
  left:0px;        
  top:0px;         
  width:100%;      
  height:100%;     
  background:#000; 
  opacity:0.5;     
  z-index:99999;   
  }
  
  #popup {
  display:none;
  position:fixed;
  left:50%;        
  top:50%;         
  width:300px;     
  height:150px;
  margin-top:-75px;
  margin-left:-150px;
  background:#FFFFFF;
  border:2px solid #000;
  z-index:100000;      
  }
  </code></pre>