the accordion switching icon does not work properly

const tabs = document.querySelectorAll(".faq__tab").forEach(button => {
  button.addEventListener("click", () => {
    const tabsContent = button.nextElementSibling;
    button.classList.toggle('active-faq');
    let minus = button.querySelector(".plus");//instead of document use button to target the corresponding element
    let plus = button.querySelector(".minus");//instead of document use button to target the corresponding element

    if (button.classList.contains('active-faq')) {
      tabsContent.style.maxHeight = tabsContent.scrollHeight + 'px';   
      minus.style.display = 'none';
      plus.style.display = 'inline-flex';
    } else {
      tabsContent.style.maxHeight = 0;
      plus.style.display = 'none';
      minus.style.display = 'inline-flex';
    }
  })
});

.plus {
  padding-left: 10px;
}

.minus {
  padding-left: 10px;
  display: none;
}
.faq__panel {
  max-height: 0px;
  overflow: hidden;
}

<button class="faq__tab">Question1
  <img src='img/plus.svg' alt="Show" class="plus">
  <img src='img/minus-svg.png' alt="Hide" class="minus">
</button>
<div class="faq__panel">
  <p>Answer1</p>
</div>

<button class="faq__tab">Question2
  <img src='img/plus.svg' alt="Show" class="plus">
  <img src='img/minus-svg.png' alt="Hide" class="minus">
</button>
<div class="faq__panel">
  <p>Answer2</p>
</div>