No puedo hacer que mis modales funcionen. El primero funciona pero el resto no. no se que estoy haciendo mal Probé diferentes variaciones de un bucle for y un método forEach pero nada funciona.

 <div class="modal hidden" id='modal1'> <button class="close-modal">&times;</button> <img src="./Images/alstroemeria.jpg" alt="Three pink and white flowers with a yellow and white center with green stems. Lavender flower is faded in the background." /> <h2>Alstroemeria</h2> <p> It's symbolic of wealth, prosperity and fortune. It is also the flower of friendship. </p> </div> <div class="overlay hidden"></div> <button class="btn">Siberian Iris</button> <div class="modal hidden" id='modal2'> <button class="close-modal">&times;</button> <img src="./Images/siberian-iris.jpeg" width="200" height="200" alt="A close up photo of a flower with various hues of blue, purple, and yellow. The flower has vein like designs on most of the petals." /> <h2>Siberian Iris</h2> <p> <h2>Siberian Iris</h2> It symbolizes eloquence. Purple iris is symbolic of wisdom and compliments. Blue iris symbolizes faith and hope. Yellow iris symbolizes passion while white iris symbolizes purity. </p> </div> <div class="overlay hidden"></div>

este código JS solo funciona para el primer botón pero no para el segundo botón.

 const modal = document.querySelectorAll(".modal"); const openModal = document.querySelectorAll(".btn"); const closeBtn = document.querySelectorAll(".close-modal"); const overlay = document.querySelectorAll(".overlay"); const showModal = () => { modal.classList.remove("hidden"); overlay.classList.remove("hidden"); }; const closeModal = () => { modal.classList.add("hidden"); overlay.classList.add("hidden"); }; openModal.addEventListener("click", showModal); closeBtn.addEventListener("click", closeModal); overlay.addEventListener("click", closeModal);

Probé estos bucles por separado pero no funcionan. ¿Qué estoy haciendo mal?

 for (let i = 1; i < modal.length; i++) { openModal[i].addEventListener("click", showModal); closeBtn.addEventListener("click", closeModal); overlay.addEventListener("click", closeModal); } modal.forEach(function (modals) { modals.addEventListener("click", function () { showModal(); }); });