Issues with toggling an class with javascript

Question

I'm creating my first little project and I'm having a button toggle a class on an element. When I use the toggle I can see in the browser that chrome shows as if it changed but it changes to the same thing that's on it right now. I've even tried toggling a different random class onto it and cannot get it to toggle that on or off. Not quite sure what I'm doing wrong.

Heres my javascript:

document.querySelectorAll(".open").forEach((item) => {
  item.addEventListener("click", (event) => {
    event.target
     .parentElement
     .parentElement
     .parentElement
     .parentElement
     .children[1]
     .classList.toggle("hidden");
  });
});

And my HTML code

<div class="search-container">
  <ul class="blade-list">
    <li class="blade">
      <div class="title">
        <h1 class="blade-material">27574-10</h1>
        <div class="buttons">
          <button class="open" id="open1">
            <img
              class="open"
              id="open1"
              src="img/svg/plus-empty.svg"
              alt="Expand specs"
            />
          </button>
          <button class="print" id="print1">
            <img
              class="print"
              id="print1"
              src="img/svg/printer-empty.svg"
              alt="Print"
            />
          </button>
        </div>
      </div>
      <div
        class="specs-container hidden"
        id="specs-container-1"
      ></div>
    </li>
  </ul>
</div>

Answer 1

certainly, something like this would be preferable

document.querySelectorAll("button.open").forEach(item => {
  item.addEventListener("click", event => {
    event
      .currentTarget.closest(".title") // currentTarget
      .nextElementSibling
      .classList.toggle("hidden");
  });
});

Answer 2

You use querySelectorAll(".open") which will select both <button class="open"> ... </button> and the image inside <img class="open" ... \> This means that when you click the button, the event is fired twice (one for the button, one for the image).
The code which toggles the class is actually correct, but it toggles twice which means there's no effect
Here is the fixed HTML

<div class="search-container">
  <ul class="blade-list">
    <li class="blade">
      <div class="title">
        <h1 class="blade-material">27574-10</h1>
        <div class="buttons">
          <button class="open" id="open1">
            <img
              id="open1"
              src="img/svg/plus-empty.svg"
              alt="Expand specs"
            />
          </button>
          <button class="print" id="print1">
            <img
              class="print"
              id="print1"
              src="img/svg/printer-empty.svg"
              alt="Print"
            />
          </button>
        </div>
      </div>
      <div
        class="specs-container hidden"
        id="specs-container-1"
      ></div>
    </li>
  </ul>
</div>

If you plan to do the same thing with the print button/img then make sure to remove class="print" from it aswell.