title: Multiple buttons only opening most recent modal in code
body: <p>Very new to coding here, but I am coding a web app, and I want to have two buttons at the top of the page. one to login/create an account, and another to add a review of the page. I added the first button and got it to display a modal when it was pressed, this all worked fine. I then tried to add a second button that would display another modal, but now both buttons only display the second modal.</p>
  
  <p>Each modal had a small 'x' at the top right corner to exit and this also doesn't work now. Here is my code</p>
  
  <p>The style is all in the head.</p>
  
  <p>
      </p>
  
  <pre><code>    /* The Modal (background) */
      .modal {
          display: none;
          position: fixed;
          z-index: 1;
          padding-top: 100px;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          overflow: auto;
          background-color: rgb(0,0,0);
          background-color: rgba(0,0,0,0.3); /* Used to grey out the rest of the screen */
      }
  
      /* Modal Content */
      .modal-content {
          background-color: #fefefe; /* Background colour of Modal */
          margin: auto;
          padding: 20px;
          border: 1px solid #888;
          width: 50%;
      }
  
      /* The Close Button */
      .close {
          color: #aaaaaa;
          float: right;
          font-size: 28px;
          font-weight: bold;
      }
  
      .close:hover,
      .close:focus {
          color: #000;
          text-decoration: none;
          cursor: pointer;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>The rest of the code is all in the body.</p>
  
  <pre><code>&lt;h2&gt;Modal Testing&lt;/h2&gt;
  
  &lt;!-- Buttons to open Modals --&gt;
  &lt;button id="loginBtn"&gt;Account&lt;/button&gt;
  &lt;button id="reviewBtn"&gt;Add Review&lt;/button&gt;
  
  &lt;!-- The Modals --&gt;
  
  &lt;!-- Login/Create Account Modal --&gt;
  &lt;div id="loginModal" class="modal"&gt;
  
  &lt;!-- Modal content --&gt;
  &lt;div class="modal-content"&gt;
      &lt;span class="close"&gt;&amp;times;&lt;/span&gt;
      &lt;p&gt;Login details&lt;/p&gt;
      &lt;!-- Allows the user to input information--&gt;
      &lt;form action="/action_page.php"&gt;
          Username:&lt;br&gt;
          &lt;input type="text" name="username" value=""&gt;
          &lt;br&gt;
          Password:&lt;br&gt;
          &lt;input type="password" value="" id="userInput"&gt;
          &lt;br&gt;&lt;br&gt;
          &lt;input type="checkbox" onclick="visible()"&gt;Show Password
      &lt;/form&gt;
      &lt;button id="signInBtn"&gt;Sign In&lt;/button&gt;
      &lt;p&gt;Not got an account? Sign up now!&lt;/p&gt;
      &lt;button id="signUpBtn"&gt;Sign Up&lt;/button&gt;
      &lt;button id="cancelBtn"&gt;Cancel&lt;/button&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;script&gt;
  function visible(){
      var x = document.getElementById("userInput");
      if (x.type === "password") {
          x.type = "text";
      } else {
          x.type = "password";
      }
  }
  &lt;/script&gt;
  
  &lt;script&gt;
  // Get the modal
  var modal = document.getElementById('loginModal');
  
  // Get the button that opens the modal
  var btn = document.getElementById("loginBtn");
  
  // Get the &lt;span&gt; element that closes the modal
  var span = document.getElementsByClassName("close")[0];
  
  // When the user clicks the button, open the modal
  btn.onclick = function() {
      modal.style.display = "block";
  }
  
  // When the user clicks on &lt;span&gt; (x), close the modal
  span.onclick = function() {
      modal.style.display = "none";
  }
  
  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
      if (event.target == modal) {
          modal.style.display = "none";
      }
  }
  &lt;/script&gt;
  
  &lt;!-- Add Review Modal --&gt;
  &lt;div id="addReviewModal" class="modal"&gt;
  
  &lt;!-- Modal content --&gt;
  &lt;div class="modal-content"&gt;
      &lt;span class="close"&gt;&amp;times;&lt;/span&gt;
      &lt;p&gt;Add Review&lt;/p&gt;
      &lt;!-- Allows the user to input information--&gt;
      &lt;form action="/review_page.php"&gt;
          Location:&lt;br&gt;
          &lt;input type="text" name="location" value=""&gt;
          &lt;br&gt;
          Comments:&lt;br&gt;
          &lt;input type="text" name="comments" value=""&gt;
          &lt;br&gt;
      &lt;/form&gt;
      &lt;button id="submitBtn"&gt;Submit Review&lt;/button&gt;
      &lt;button id="cancelBtn"&gt;Cancel&lt;/button&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;script&gt;
  // Get the modal
  var modal = document.getElementById('addReviewModal');
  
  // Get the button that opens the modal
  var btn = document.getElementById("reviewBtn");
  
  // Get the &lt;span&gt; element that closes the modal
  var span = document.getElementsByClassName("close")[0];
  
  // When the user clicks the button, open the modal
  btn.onclick = function() {
      modal.style.display = "block";
  }
  
  // When the user clicks on &lt;span&gt; (x), close the modal
  span.onclick = function() {
      modal.style.display = "none";
  }
  
  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
      if (event.target == modal) {
          modal.style.display = "none";
      }
  }
  &lt;/script&gt;
  </code></pre>