How can I add css class to the to the nested element using DOM?-CodePudding

I have four child divs inside the container div, every child div has a button, image, and text inside. Images have to be blurry and text has to be hidden by default.

And when the user clicks the button, the button should be hidden, image and text should become clear and visible.

I'm trying to add or remove CSS classes from elements using for loop, but that just doesn't work at all...

let btns = document.querySelectorAll(".btn");
let images = document.querySelectorAll(".img");
let imgTexts = document.querySelectorAll(".img-text");

images.forEach((el) => el.classList.add("blur"));
imgTexts.forEach((el) => el.classList.add("hidden"));
for (let i = 0; i < btns; i  ) {
  btns[i].addEventListener("click", function () {
    btns[i].classList.add("hidden");
  });
}

.blur {
  filter: blur(8px);
  -webkit-filter: blur(8px);
}
.hidden {
  display: none;
}

<div >
      <div >
        <button >Open the Gift</button>
        <img
          src=""
          alt="#" >
        <p >CONGRATULATIONS