Aşağıdaki HTML kodunda "fa-arrow-circle-down" classını aşağıdaki javascript toggle metodu ile "fa-arrow-circle-up" şeklinde değiştirmeye çalışıyorum ancak çalışmıyor kod ekleniyor ancak eski class silinmediği için toggle işlemi olmuyor.

<div class="kapsa">
      <h1>Akordiyon Menü Uygulaması</h1>
      <button type="button" class="akordiyon">
        <span>HTML</span>
        <i class="fas fa-arrow-circle-down"></i>
      </button>
      <div class="kutu">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora
          possimus molestias veritatis, doloremque fugiat at eum, quisquam eaque
          esse molestiae, eligendi aliquid! Beatae quidem harum debitis aliquam
          fuga error minima.
        </p>
      </div>
      <button type="button" class="akordiyon">
        <span>CSS</span>
        <i class="fas fa-arrow-circle-down"></i>
      </button>
      <div class="kutu">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora
          possimus molestias veritatis, doloremque fugiat at eum, quisquam eaque
          esse molestiae, eligendi aliquid! Beatae quidem harum debitis aliquam
          fuga error minima.
        </p>
      </div>
      <button type="button" class="akordiyon">
        <span>JAVASCRIPT</span>
        <i class="fas fa-arrow-circle-down"></i>
      </button>
      <div class="kutu">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora
          possimus molestias veritatis, doloremque fugiat at eum, quisquam eaque
          esse molestiae, eligendi aliquid! Beatae quidem harum debitis aliquam
          fuga error minima.
        </p>
      </div>
    </div>

Js kodları şu şekilde;

var buton = document.getElementsByClassName("akordiyon");
var ok = document.getElementsByClassName("fa-arrow-circle-down");
for (var i = 0; i < buton.length; i++) {
  buton[i].onclick = function () {
    var panel = this.nextElementSibling;
    this.lastElementChild.classList.toggle("fa-arrow-circle-up");
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  };
}

sorun ne olabilir ?