Problem with a 'more info button'

Hi guys i have troubles with a more info button that doesn’t work. Well it works but only on the first hero card i don’t know why.
I used querryselectorAll and now it doesn’t work at all.
It’s a personnal project that i do to be better at JS but i don’t understand the problem here.

const cards = document.querySelectorAll(".card");
const opens = document.querySelectorAll(".open");
const infos = document.querySelectorAll(".more-info");
const closes = document.querySelectorAll(".close");

[...cards].forEach((card) => {
  card.addEventListener("click", function () {
    card.classList.toggle("is-flipped");
  });
});

[...opens].forEach((open) => {
  open.addEventListener("click", () => {
    infos.style.display = "block";
  });
});

[...closes].forEach((close) => {
  close.addEventListener("click", () => {
    infos.style.display = "none";
  });
});
<div class="hero-info">
    <div clas="card-wrap">
      <div class="card">
        <div class="card__face card__face--front">
          <div class="blob"></div>
          <img src='./images/portraits/psoldat.jpg' class="img">
          <h2>Soldier 76</h2>
          <p>
            <img src="./images/icons/plus.png" alt="plus icon" class="icon open">
          </p>
        </div>
        <div class="card__face card__face--back">
          <img src="./images/ow1/soldat1.jpg" alt="soldierow2" class="backimg">
        </div>
      </div>
    </div>
    <div class="more-info">
      <img src="./images/icons/close.png" alt="close" class="icon close">
      <div class="info-white">

      </div>
    </div>
  </div>

please explain, how does it not work? what should happen? what does happen?

what should happen is when i click on the ‘icon open’ the more-info div should appear and when i click on the ‘icon close’ it should make the ‘more-info’ div disappear. it works when i use :

open.addEventListener("click", () => {
  info.style.display = "block";
});

close.addEventListener("click", () => {
  info.style.display = "none";
});

This work for only the first one but when i use querryselectorAll it doesn’t.

Don’t you get this?

Uncaught TypeError: Cannot set properties of undefined (setting ‘display’)

What is infos?

to close, you can use

[...closes].forEach((close) => {
  close.addEventListener("click", (e) => {
    e.target.parent.style.display = "none";
  });

as it’s the parent of the close button you want to close.
For the open, you can’t use infos as that is a node collection, you will need to get the specific element you want to open instead

ok thank you i’ll try this as soon as i can thanks a lot!!