Open modals with html tag <dialog>

Question

First of all, I'm an absolutely noob with JavaScript and trying to learn this, so pls don't roast me for my question.

My Question: I have 3 tags on my website and want to open and close the dialogs to set an 'open' attribute. Unfortunately, I'm only able to open only 1 (the first) of the 3 modals.

<!-- MODAL 1 -->
<button class="button open-button">
    click here
</button>

<dialog class="modal">
    <h4 class="modal__title">Modal 1</h4>
    <button class="button close-button">X</button>
</dialog>

<!-- MODAL 2 -->
<button class="button open-button">
    click here
</button>

<dialog class="modal">
    <h4 class="modal__title">Modal 2</h4>
    <button class="button close-button">X</button>
</dialog>

<!-- MODAL 3 -->
<button class="button open-button">
    click here
</button>

<dialog class="modal">
    <h4 class="modal__title">Modal 3</h4>
    <button class="button close-button">X</button>
</dialog>

And that's my js currently:

const modal = document.querySelector(".modal");
const openModal = document.querySelectorAll(".open-button");
const closeModal = document.querySelector(".close-button");

openModal.addEventListener("click", () => {
  modal.showModal();
});

closeModal.addEventListener("click", () => {
  modal.close();
});

I'm not sure, how to tell js to be able to open multiple modals, when I click on the button.

Answer 1

Gather each class in a NodeList.

Bind the click event to each button.open. When a button.open is clicked, open the dialog.modal corresponding to it's index.

Bind the click event to each button.close. When a button.close is clicked, close the dialog.modal that the button.close reside within.

Details are commented in example

// Collect each class into a NodeList
const modal = document.querySelectorAll(".modal");
const open = document.querySelectorAll(".open");
const close = document.querySelectorAll(".close");

/*
Bind the click event to each button.open
open the dialog.modal that corresponds to current index (idx)
*/
open.forEach((btn, idx) => btn.addEventListener("click", e => modal[idx].showModal()));

/*
Bind the click event to each button.close
close the dialog.modal that is the ancestor of the clicked button.close
*/
close.forEach(btn => btn.addEventListener("click", e => btn.closest('.modal').close()));

dialog,
fieldset {
  border-radius: 4px;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6px;
}

h4 {
  margin: 0;
}

footer {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding-top: 6px;
}

<menu>
  <button class="open" type='button'>Open 1</button>
  <button class="open" type='button'>Open 2</button>
  <button class="open" type='button'>Open 3</button>
</menu>

<dialog class="modal">
  <header>
    <h4>Modal 1</h4><button class="close" type='button'>X</button>
  </header>
  <fieldset>
    <p>Oh no. I'm late to class, bitch. </p>
    <p>Earth's going tah tah. You might wanna do that thing where you find a new universe where you can suck yourself off. </p>
    <p>God, Grandpa, you're such a dick. </p>
  </fieldset>
  <footer>
    <button class='close' type='button'>Cancel</button>
  </footer>
</dialog>

<dialog class="modal">
  <header>
    <h4>Modal 2</h4><button class="close" type='button'>X</button>
  </header>
  <fieldset>
    <p>Then let me GET to know you!</p>
    <p>I'm the Devil, what should I do when I fail? Give myself an ice cream?</p>
    <p>If I've learned one thing, it's that before you get anywhere in life, you gotta stop listening to yourself.</p>
  </fieldset>
  <footer>
    <button class='close' type='button'>Close</button>
  </footer>
</dialog>

<dialog class="modal">
  <header>
    <h4>Modal 3</h4><button class="close" type='button'>X</button>
  </header>
  <fieldset>
    <p>Oh god, oh, I blame myself. Oh, what a tragedy. Oh, well, he's bones now. I guess all debts are paid. </p>
    <p>No! Look away! I'm making an egg, Mom! Ugh…! I'm making an egg! </p>
    <p>If you break the rules, try to leave or lose the game, you will die. Just like Saaaaw.</p>
  </fieldset>
  <footer>
    <button class='close' type='button'>Close</button>
  </footer>
</dialog>