Pop-up Modal Issue

I tried creating a pop-up modal for my resume page and only my first pop-up modal worked, both modal 2 and 3 didn't not pop-up when I tried clicking on the button for each modal. I tried giving the modal "id" unique numbers but that didn't work out and I tried replacing the names for last 2 modals but it didn't work.

Should I implement a onClick function or what am I missing?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    const modal = document.querySelector("#modal");
    const openModal = document.querySelector(".open-button");
    const closeModal = document.querySelector(".close-button");
    
    openModal.addEventListener("click", () => {
      modal.showModal();
    });
    
    closeModal.addEventListener("click", () => {
      modal.close();
    });

<!-- language: lang-css -->

    .modal {
        padding: 5em;
        max-width: 100ch;
       
    }
    .modal2 {
        padding: 1em;
        margin: 5em;
        max-width: 100ch;
      
    }
    .modal3 {
        padding: 1em;
        max-width: 50ch;
    
    }

<!-- language: lang-html -->

    <dialog class="modal" id="modal">
        <h2>Bank Project Info</h2>
        <p>I have been a part of a group were we created a online bank in which users could go in and borrow and deposit money. They could create their own account and log in and out on their own accord.</p>             
        <button class="button close-button">close</button>
    </dialog>
    <dialog class="modal" id="modal2">
        <h2>School Project Info</h2>
        <p>Me and some other classmates created a school project were we created a console application that enabled us to add both students and teacher into the application. We could add student information, who their teachers were and how many students each class had.</p>                       
        <button class="button close-button">close</button>
    </dialog>



     <dialog class="modal" id="modal3">
        <h2>ASP.NET Project Info</h2>
        <p>We were tasked to build a administration application for a webshop, it was suppose to be a create with a seperate admin functionality for the website. Was a very interesting webpage that me and my group created, we used HTML, CSS and JavaScript for the project.</p>                       
        <button class="button close-button">close</button>
    </dialog>

<!-- end snippet -->

Your code is only running on one element you need to have code for each one.

The copy/paste solution is make multiple copies for each button. That is not great.

Better solution is code that loops over html collection and binds events.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// get all the buttons that open the modals
const openButtons = document.querySelectorAll("[data-opens]");

// loop over the buttons
openButtons.forEach(function(btn) {
  // get the selector
  var modalSelector = btn.dataset.opens;

  btn.addEventListener("click", function() {
    document.querySelector(modalSelector).showModal();
  });
});

//get all the close buttons and attach events
// get all the buttons that open the modals
const closeButtons = document.querySelectorAll(".close-button");

closeButtons.forEach(function(btn) {
  btn.addEventListener("click", function() {
    // find the parent that is a modal element and close it
    btn.closest('.modal').close();
  });
});

<!-- language: lang-css -->

.modal {
  padding: 5em;
  max-width: 100ch;
}

.modal2 {
  padding: 1em;
  margin: 5em;
  max-width: 100ch;
}

.modal3 {
  padding: 1em;
  max-width: 50ch;
}

<!-- language: lang-html -->

<dialog class="modal" id="modal">
  <h2>Bank Project Info</h2>
  <p>I have been a part of a group were we created a online bank in wich users could go in and borrow and deposit money. They could create their own account and log in and out on their own accord.</p>
  <button class="button close-button">close</button>
</dialog>
<dialog class="modal" id="modal2">
  <h2>School Project Info</h2>
  <p>Me and some other classmates created a school project were we created a console application that enabled us to add both students and teacher into the application. We could add student information, who their teachers were and how many students each class
    had.</p>
  <button class="button close-button">close</button>
</dialog>



<dialog class="modal" id="modal3">
  <h2>ASP.NET Project Info</h2>
  <p>We were tasked to build a administration application for a webshop, it was suppose to be a create with a seperate admin functionality for the website. Was a very interesting webpage that me and my group created, we used HTML, CSS and JavaScript for
    the project.</p>
  <button class="button close-button">close</button>
</dialog>


<button data-opens="#modal">1</button>
<button data-opens="#modal2">2</button>
<button data-opens="#modal3">3</button>

<!-- end snippet -->

Other solution is event delegation

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// Bind event to an element that contains all of the modals and open buttons
document.body.addEventListener("click", function(evt) {
  // get was clicked
  const elem = event.target;

  // determine if we clicked the open button or the close button
  if (elem.matches('[data-opens]')) {
    var modalSelector = elem.dataset.opens;
    document.querySelector(modalSelector).showModal();
  } else if (elem.matches('.close-button')) {
    elem.closest(".modal").close();
  }
});

<!-- language: lang-css -->

.modal {
  padding: 5em;
  max-width: 100ch;
}

.modal2 {
  padding: 1em;
  margin: 5em;
  max-width: 100ch;
}

.modal3 {
  padding: 1em;
  max-width: 50ch;
}

<!-- language: lang-html -->

<dialog class="modal" id="modal">
  <h2>Bank Project Info</h2>
  <p>I have been a part of a group were we created a online bank in wich users could go in and borrow and deposit money. They could create their own account and log in and out on their own accord.</p>
  <button class="button close-button">close</button>
</dialog>
<dialog class="modal" id="modal2">
  <h2>School Project Info</h2>
  <p>Me and some other classmates created a school project were we created a console application that enabled us to add both students and teacher into the application. We could add student information, who their teachers were and how many students each class
    had.</p>
  <button class="button close-button">close</button>
</dialog>



<dialog class="modal" id="modal3">
  <h2>ASP.NET Project Info</h2>
  <p>We were tasked to build a administration application for a webshop, it was suppose to be a create with a seperate admin functionality for the website. Was a very interesting webpage that me and my group created, we used HTML, CSS and JavaScript for
    the project.</p>
  <button class="button close-button">close</button>
</dialog>


<button data-opens="#modal">1</button>
<button data-opens="#modal2">2</button>
<button data-opens="#modal3">3</button>

<!-- end snippet -->