The second modal with a different ID opens with a different effect - Why?

Question

I've got two different pricing cards:

    <div class="card card1" id="open">
      <span class=title>Basic</span>
      <h1>$99 USD</h1>
      <h4>Lorem ipsum dolor sit amet.</h4>
      <h2>YOU GET:</h2>
      <ul>
        <li>Access to AM</li>
        <li>Unlimited Households</li>
        <li>White-Labeling</li>
      </ul>
    </div>

    <div class="card card2" id="open2">
      <span class=title>Pro</span>
      <h1>$129 USD</h1>
      <h4>Lorem ipsum dolor sit amet.</h4>
      <h2>YOU GET:</h2>
      <ul>
        <li>Cash-Flow Reporting</li>
        <li>Beneficiary Visualization</li>
        <li>Unlimited TMs</li>
      </ul>
    </div>

When clicked, each should bring up a different modal:

    <div class="modal-container" id="modal_container">
      <div class="modal">
        <h1>Modal goes here</h1>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consectetur repudiandae quia deleniti nulla, suscipit tempora magnam blanditiis ex culpa mollitia quisquam quod? Dolores, sunt dicta adipisci rem consequuntur fugit repudiandae quia deleniti nulla.</p>
        <button id="close">Close me</button>
      </div>

      <div class="modal-container" id="modal_container2">
      <div class="modal">
        <h1>Modal 2 goes here</h1>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consectetur repudiandae quia deleniti nulla, suscipit tempora magnam blanditiis ex culpa mollitia quisquam quod? Dolores, sunt dicta adipisci rem consequuntur fugit repudiandae quia deleniti nulla.</p>
        <button id="close2">Close me</button>
      </div>

All of the ID's are unique. With this JS I am able to bring up the first modal but not the second:

const open = document.getElementById('open');
const modal_container = document.getElementById('modal_container');
const close = document.getElementById('close');

open.addEventListener('click', () => {
  modal_container.classList.add('show');
});

close.addEventListener('click', () => {
  modal_container.classList.remove('show');
});

I added unique IDs for the second card and modal, but when I pull them into the JS by adding this:

const open2 = document.getElementById('open2');
const modal_container2 = document.getElementById('modal_container2');
const close2 = document.getElementById('close2');

open2.addEventListener('click', () => {
  modal_container2.classList.add('show');
});

close2.addEventListener('click', () => {
  modal_container2.classList.remove('show');
});

I am not getting the same effect. Here is the relevant CSS:Added relevant CSS

.modal-container {
  background-color: rgba(0,0,0,0.3);
  position: fixed;
  top:0;
  left:0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}

.modal-container.show {
  opacity: 1;
  pointer-events: auto;
}

Answer 1

there was some error on your codepen, double body open and close tag, the second modal was inside the first one's container, Ids were duplicated and on the JS side the listeners for the second modal were missing, try this:

const open = document.getElementById('open');
const modal_container = document.getElementById('modal_container');
const close = document.getElementById('close');
const open2 = document.getElementById('open2');
const modal_container2 = document.getElementById('modal_container2');
const close2 = document.getElementById('close2');

open.addEventListener('click', () => {
  modal_container.classList.add('show');
});

close.addEventListener('click', () => {
  modal_container.classList.remove('show');
});

open2.addEventListener('click', () => {
  modal_container2.classList.add('show');
});

close2.addEventListener('click', () => {
  modal_container2.classList.remove('show');
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body  {
  background: #f4efed;
  font-family: 'Muli', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  cursor: crosshair;
}

.card {
  background-color: #fff;
  border-radius: 10px;
  padding: 60px 30px;
  text-align: center;
  max-width: 450px;
  min-width: 275px;
  margin: 1em;
  transition: .2s ease all;
}

.card:hover {
  transform: translateY(-20px);
  box-shadow: 0 10px 20px rgba(0,0,0,.3);
  cursor: pointer;
}

.card1 {
  background-image: linear-gradient(to bottom right, #41464d, #2d3137);
  color: white;
}

.card2 {
  background-image: linear-gradient(to bottom right, #dbb898, #b98351);
  color: white;
}

.card .title {
  font-size: .8em;
}

.card1 .title{
  font-weight: bold;
  background-color: #444950;
  border-radius: 10px;
  padding: 12px 10px;
}

.card2 .title{
  font-weight: bold;
  background-color: white;
  border-radius: 10px;
  padding: 12px 10px;
  color: #2d3137;
}

h1 {
  margin: 30px 0 30px 0;
}

h4 {
  font-weight: 100;
  font-size: .75em;
}

h2 {
  margin: 25px;
  font-size: .8em;
}

ul {
  font-size: .75em;
  line-height: 1.75em;
  list-style: none;
}

.modal-container {
  background-color: rgba(0,0,0,0.3);
  position: fixed;
  top:0;
  left:0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}

.modal-container.show {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background-color: white;
  border-radius: 10px;
  width: 800px;
  max-width: 100%;
  padding: 30px 50px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  text-align: center;
}

.modal h1 {
  margin: .5em;
}

.modal p {
 font-size: 14px;
  opacity: 0.7;
}

.modal-container button {
  background-color: #444950;
  color: white;
  border: 0;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  font-size: 14px;
  padding: 10px 25px;
  margin: 15px 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Pricing Cards</title>
</head>
<body> 
    <div class="card card1" id="open">
      <span class=title>Basic</span>
      <h1>$99 USD</h1>
      <h4>Lorem ipsum dolor sit amet.</h4>
      <h2>YOU GET:</h2>
      <ul>
        <li>Access to Asset-Map</li>
        <li>Unlimited Households</li>
        <li>White-Labeling</li>
      </ul>
    </div>
    
    <div class="card card2" id="open2">
      <span class=title>Pro</span>
      <h1>$129 USD</h1>
      <h4>Lorem ipsum dolor sit amet.</h4>
      <h2>YOU GET:</h2>
      <ul>
        <li>Cash-Flow Reporting</li>
        <li>Beneficiary Visualization</li>
        <li>Unlimited Target-Maps</li>
      </ul>
    </div>
    
    <div class="modal-container" id="modal_container">
      <div class="modal">
        <h1>Modal goes here</h1>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consectetur repudiandae quia deleniti nulla, suscipit tempora magnam blanditiis ex culpa mollitia quisquam quod? Dolores, sunt dicta adipisci rem consequuntur fugit repudiandae quia deleniti nulla.</p>
        <button id="close">Close me</button>
      </div>
    </div>
      
    <div class="modal-container" id="modal_container2">
      <div class="modal">
        <h1>Modal 2 goes here</h1>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consectetur repudiandae quia deleniti nulla, suscipit tempora magnam blanditiis ex culpa mollitia quisquam quod? Dolores, sunt dicta adipisci rem consequuntur fugit repudiandae quia deleniti nulla.</p>
        <button id="close2">Close me</button>
      </div>
    </div>
    
  </body>
</html>