How to add multiple modals

Question

I have got 2 modals, but when i click on my second modal which is "Mouthoff", then it shows the contents of Subscribe and when i click on Subscribe, then it just shows you the subscribe contents. Where as I want the 2 modals to display different content.

I have searched on here, youtube ect and i am unable to find a solution

// Get the modal
var modal = document.getElementById("subscription");

// Get the button that opens the modal
var btn = document.getElementById("subscribe");

// Get the <span> 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 <span> (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";
  }
}


// Get the modal
var modal = document.getElementById("shout");

// Get the button that opens the modal
var btn = document.getElementById("mouthoff");

// Get the <span> 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 <span> (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";
  }
}

button.subscribe {
  background: transparent !important;
  border: none;
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: top;
  float: none !important;
  margin-top: 7px;
  text-transform: uppercase;
}

button.subscribe:focus {
  outline: none;
}


/* The Modal (background) */

.subscribe-modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  -webkit-animation-name: fadeIn;
  /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s
}


/* Modal Content */

.subscribe-content {
  position: fixed;
  bottom: 0;
  background-color: #fefefe;
  width: 100%;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s
}


/* The Close Button */

.close {
  color: #000;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #ff0000;
  text-decoration: none;
  cursor: pointer;
}

.subscribe-header {
  padding: 2px 16px;
  background-color: #000;
  color: white;
}

.subscribe-body {
  padding: 2px 16px;
}

.subscribe-body h2 {
  margin-top: 15px;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 400;
  padding-bottom: 2px;
  font-family: DINNext-Bld, sans-serif;
  margin: 20px 20px 20px;
  line-height: 90%;
  text-align: center;
  letter-spacing: -.03em;
}

.subscribe-body p {
  margin-left: 550px;
  margin-right: 550px;
  font-size: 15px;
  padding-bottom: 2px;
  font-family: DINNext-Bld, sans-serif;
  text-align: justify;
}

.subscribe-body a.manage {
  margin-right: 1700px;
  padding: 6px 20px 3px;
  text-decoration: none;
  border: 1px solid #000;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  text-transform: uppercase;
  font-size: 1em;
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: top;
  float: none !important;
  color: #000;
  font-family: DINNext-Med, sans-serif;
  margin-bottom: 25px;
}

.subscribe-body a.manage:hover {
  background: #000;
  color: #fff
}

.subscribe-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}


/* Add Animation */

@-webkit-keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0
  }
  to {
    bottom: 0;
    opacity: 1
  }
}

@keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0
  }
  to {
    bottom: 0;
    opacity: 1
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@keyframes fadeIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

button.mouthoff {
  background: transparent !important;
  border: none;
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: top;
  float: none !important;
  margin-top: 7px;
  text-transform: uppercase;
}

button.mouthoff:focus {
  outline: none;
}


/* The Modal (background) */

.mouthoff-modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  -webkit-animation-name: fadeIn;
  /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s
}


/* Modal Content */

.mouthoff-content {
  position: fixed;
  bottom: 0;
  background-color: #fefefe;
  width: 100%;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s
}

.mouthoff-header {
  padding: 2px 16px;
  background-color: #000;
  color: white;
}

.mouthoff-body {
  padding: 2px 16px;
}

.mouthoff-body h2 {
  margin-top: 15px;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 400;
  padding-bottom: 2px;
  font-family: DINNext-Bld, sans-serif;
  margin: 20px 20px 20px;
  line-height: 90%;
  text-align: center;
  letter-spacing: -.03em;
}

.mouthoff-body p {
  margin-left: 550px;
  margin-right: 550px;
  font-size: 15px;
  padding-bottom: 2px;
  font-family: DINNext-Bld, sans-serif;
  text-align: justify;
}

.mouthoff-body a.manage {
  margin-right: 1700px;
  padding: 6px 20px 3px;
  text-decoration: none;
  border: 1px solid #000;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  text-transform: uppercase;
  font-size: 1em;
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: top;
  float: none !important;
  color: #000;
  font-family: DINNext-Med, sans-serif;
  margin-bottom: 25px;
}

.mouthoff-body a.manage:hover {
  background: #000;
  color: #fff
}

.mouthoff-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}


/* Add Animation */

@-webkit-keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0
  }
  to {
    bottom: 0;
    opacity: 1
  }
}

@keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0
  }
  to {
    bottom: 0;
    opacity: 1
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@keyframes fadeIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

<!-- Trigger/Open The Modal -->
<button class="subscribe" id="subscribe">Subscribe</button>

<!-- The Modal -->
<div id="subscription" class="subscribe-modal">

  <!-- Modal content -->
  <div class="subscribe-content">
    <div class="subscribe-header">
      <span class="close"></span>
    </div>
    <div class="subscribe-body">
      <h2>Subscribe to the Galaxy Mailing List</h2>
      <p>Welcome to the Galaxy Games Subscription Management page. Galaxy mailing lists are the best way to get the early word on all our game announcements, official launches, contests, special events, and more. Make sure you're enlisted to receive all
        the updates.</p>
      <a href="https://socialclub.galaxy-games.co.uk/settings/email" class="manage" target="_blank" click="closeSection()" data-gtm-category="Footer" data-gtm-action="Social Club" data-gtm-label="Manage Subscription Account">Manage Your Account</a>
    </div>
  </div>

</div>





<!-- Trigger/Open The Modal -->
<button class="mouthoff" id="mouthoff">mouthoff</button>

<!-- The Modal -->
<div id="shout" class="mouthoff-modal">

  <!-- Modal content -->
  <div class="mouthoff-content">
    <div class="mouthoff-header">
      <span class="close"></span>
    </div>
    <div class="mouthoff-body">
      <h2>Mouthoff - Tell Us What's On Your Mind</h2>
      <p>Welcome to the Galaxy Games Subscription Management page. Galaxy mailing lists are the best way to get the early word on all our game announcements, official launches, contests, special events, and more. Make sure you're enlisted to receive all
        the updates.</p>
      <a href="https://socialclub.galaxy-games.co.uk/settings/email" class="manage" target="_blank" click="closeSection()" data-gtm-category="Footer" data-gtm-action="Social Club" data-gtm-label="Manage Subscription Account">Manage Your Account</a>
    </div>
  </div>

</div>

Answer 1

You need to have different variable names for different QuerySelectors to access them or you're reassigning them.

If you re-assign, it will discard the first one and will select the latter one.

// Get the modal
var modal = document.getElementById("subscription");

// Get the button that opens the modal
var btn = document.getElementById("subscribe");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// Get the modal
var shoutModal = document.getElementById("shout");

// Get the button that opens the modal
var mouthoffButton = document.getElementById("mouthoff");

// Get the <span> element that closes the modal
var spanClose = 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 <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}


// When the user clicks the button, open the modal 
mouthoffButton.onclick = function() {
  shoutModal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
spanClose.onclick = function() {
  shoutModal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal || event.target == shoutModal) {
    shoutModal.style.display = "none";
    modal.style.display = "none";
  }
}

button.subscribe {
  background: transparent !important;
  border: none;
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: top;
  float: none !important;
  margin-top: 7px;
  text-transform: uppercase;
}

button.subscribe:focus {
  outline: none;
}


/* The Modal (background) */

.subscribe-modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  -webkit-animation-name: fadeIn;
  /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s
}


/* Modal Content */

.subscribe-content {
  position: fixed;
  bottom: 0;
  background-color: #fefefe;
  width: 100%;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s
}


/* The Close Button */

.close {
  color: #000;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #ff0000;
  text-decoration: none;
  cursor: pointer;
}

.subscribe-header {
  padding: 2px 16px;
  background-color: #000;
  color: white;
}

.subscribe-body {
  padding: 2px 16px;
}

.subscribe-body h2 {
  margin-top: 15px;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 400;
  padding-bottom: 2px;
  font-family: DINNext-Bld, sans-serif;
  margin: 20px 20px 20px;
  line-height: 90%;
  text-align: center;
  letter-spacing: -.03em;
}

.subscribe-body p {
  margin-left: 550px;
  margin-right: 550px;
  font-size: 15px;
  padding-bottom: 2px;
  font-family: DINNext-Bld, sans-serif;
  text-align: justify;
}

.subscribe-body a.manage {
  margin-right: 1700px;
  padding: 6px 20px 3px;
  text-decoration: none;
  border: 1px solid #000;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  text-transform: uppercase;
  font-size: 1em;
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: top;
  float: none !important;
  color: #000;
  font-family: DINNext-Med, sans-serif;
  margin-bottom: 25px;
}

.subscribe-body a.manage:hover {
  background: #000;
  color: #fff
}

.subscribe-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}


/* Add Animation */

@-webkit-keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0
  }
  to {
    bottom: 0;
    opacity: 1
  }
}

@keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0
  }
  to {
    bottom: 0;
    opacity: 1
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@keyframes fadeIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

button.mouthoff {
  background: transparent !important;
  border: none;
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: top;
  float: none !important;
  margin-top: 7px;
  text-transform: uppercase;
}

button.mouthoff:focus {
  outline: none;
}


/* The Modal (background) */

.mouthoff-modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  -webkit-animation-name: fadeIn;
  /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s
}


/* Modal Content */

.mouthoff-content {
  position: fixed;
  bottom: 0;
  background-color: #fefefe;
  width: 100%;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s
}

.mouthoff-header {
  padding: 2px 16px;
  background-color: #000;
  color: white;
}

.mouthoff-body {
  padding: 2px 16px;
}

.mouthoff-body h2 {
  margin-top: 15px;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 400;
  padding-bottom: 2px;
  font-family: DINNext-Bld, sans-serif;
  margin: 20px 20px 20px;
  line-height: 90%;
  text-align: center;
  letter-spacing: -.03em;
}

.mouthoff-body p {
  margin-left: 550px;
  margin-right: 550px;
  font-size: 15px;
  padding-bottom: 2px;
  font-family: DINNext-Bld, sans-serif;
  text-align: justify;
}

.mouthoff-body a.manage {
  margin-right: 1700px;
  padding: 6px 20px 3px;
  text-decoration: none;
  border: 1px solid #000;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  text-transform: uppercase;
  font-size: 1em;
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: top;
  float: none !important;
  color: #000;
  font-family: DINNext-Med, sans-serif;
  margin-bottom: 25px;
}

.mouthoff-body a.manage:hover {
  background: #000;
  color: #fff
}

.mouthoff-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}


/* Add Animation */

@-webkit-keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0
  }
  to {
    bottom: 0;
    opacity: 1
  }
}

@keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0
  }
  to {
    bottom: 0;
    opacity: 1
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@keyframes fadeIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

<!-- Trigger/Open The Modal -->
<button class="subscribe" id="subscribe">Subscribe</button>

<!-- The Modal -->
<div id="subscription" class="subscribe-modal">

  <!-- Modal content -->
  <div class="subscribe-content">
    <div class="subscribe-header">
      <span class="close"></span>
    </div>
    <div class="subscribe-body">
      <h2>Subscribe to the Galaxy Mailing List</h2>
      <p>Welcome to the Galaxy Games Subscription Management page. Galaxy mailing lists are the best way to get the early word on all our game announcements, official launches, contests, special events, and more. Make sure you're enlisted to receive all
        the updates.</p>
      <a href="https://socialclub.galaxy-games.co.uk/settings/email" class="manage" target="_blank" click="closeSection()" data-gtm-category="Footer" data-gtm-action="Social Club" data-gtm-label="Manage Subscription Account">Manage Your Account</a>
    </div>
  </div>

</div>





<!-- Trigger/Open The Modal -->
<button class="mouthoff" id="mouthoff">mouthoff</button>

<!-- The Modal -->
<div id="shout" class="mouthoff-modal">

  <!-- Modal content -->
  <div class="mouthoff-content">
    <div class="mouthoff-header">
      <span class="close"></span>
    </div>
    <div class="mouthoff-body">
      <h2>Mouthoff - Tell Us What's On Your Mind</h2>
      <p>Welcome to the Galaxy Games Subscription Management page. Galaxy mailing lists are the best way to get the early word on all our game announcements, official launches, contests, special events, and more. Make sure you're enlisted to receive all
        the updates.</p>
      <a href="https://socialclub.galaxy-games.co.uk/settings/email" class="manage" target="_blank" click="closeSection()" data-gtm-category="Footer" data-gtm-action="Social Club" data-gtm-label="Manage Subscription Account">Manage Your Account</a>
    </div>
  </div>

</div>