I just want to show/hide my divs, but I’m having issues with my variables. Any ideas?

I’m making a mini project for a coding class, featuring a list of poems. I set the poems in divs and the divs in a section (per a suggestion), and I want to toggle the poems’ text and images so that they show or hide, and I wanted to change the button text to “Close” when shown from “Read” when hidden.

While I got some help, mainly with setting up the .forEach() method, I still can’t find the solution. I’ve tried everything. Any other advice has been too confusing and too hard to follow.

Any help is appreciated. Thank you.

I tried using the different methods of retrieving elements from the DOM (.querySelector, .querySelectorAll, .getElementById, etc.). I tried changing the class and id names. I tried making it so I didn’t shadow my variables. Literally everything.

let selection = document.querySelector(".poem")
const buttons = document.querySelectorAll(".btn");

// show poem or hide poem
// change text to "Read" or "Close"; if the poem is hidden, say "Read"; if it is showing, say "Close"

const readPoem = (poem) => {
  if (selection.style.display == "none") {
    selection.style.display = "block";
  } else {
    selection.style.display = "none";
  }
};

console.log()

buttons.forEach((btn) => {
  btn.addEventListener("click", (selection) => {
    if (selection.style.display == "none") {
      selection.style.display = "block";
      btn.textContent = "Close";
    } else {
      selection.style.display = "none";
      btn.textContent = "Read";
    }
  });
});