两个手风琴，但仅使用Javascript设置第一个箭头的动画

我的书页上有两个手风琴。我的脚本可以在单击第一个箭头时将其旋转，但当我单击第二个手风琴的箭头时，第二个手风琴会按预期打开，但我不知道如何使第二个箭头旋转。即使我单击第二个手风琴，第一个手风琴的箭头也会旋转

<a class="menu-accordion">
  @@include('img/icons/arrow-hcp.svg')
  text
</a>
<div class="panel">
  <ul>
    <li><a href="/"> @@include('img/icons/chevron-right-wht.svg')</a></li>
  </ul>
</div>
<a class="menu-accordion">
  @@include('img/icons/arrow-hcp.svg')
</a>
<div class="panel">
  <ul>
    <li><a href="/"> @@include('img/icons/chevron-right-wht.svg')</a></li>
  </ul>
</div>




  var acc = document.getElementsByClassName("menu-accordion");
  var svgarrow = document.querySelector(".menu-accordion > svg");
  var i;
  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function () {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.display === "block") { 
        panel.style.display = "none";
        svgarrow.style.transform = "rotate(90deg)";
      } 
      else {
        panel.style.display = "block";
        svgarrow.style.transform = "rotate(-90deg)";
      }
    });
  }

var acc=document.getElementsByClassName（“菜单手风琴”）；
var svgarrow=document.querySelector（“.menu accordion>svg”）；
var i；
对于（i=0；i