Изменение состояния кнопок при клике на них при помощи JS

<div class="track d-flex align-items-center">
  <span class="play">
    <i class="fa fa-play" aria-hidden="true"></i>
    <img class="pause" src="/images/pause-icon.svg" alt="">
  </span>
  <a href="/inner/music" class="d-flex flex-column track_name--wrap">
    <span class="track_name">Oh My Love</span>
    <span class="track_singer">The Score</span>
  </a>
  <div class="track_top ml-auto">1</div>
    <div class="track_download">
    <a href="#">
       svg class="download-icon">
          <use xlink:href="/images/sprite.svg#download"></use>
       </svg>
    </a>
  </div>
</div>
<div class="track d-flex align-items-center">
  <span class="play">
    <i class="fa fa-play" aria-hidden="true"></i>
    <img class="pause" src="/images/pause-icon.svg" alt="">
  </span>
  <a href="/inner/music" class="d-flex flex-column track_name--wrap">
    <span class="track_name">Oh My Love</span>
    <span class="track_singer">The Score</span>
  </a>
  <div class="track_top ml-auto">1</div>
    <div class="track_download">
    <a href="#">
       svg class="download-icon">
          <use xlink:href="/images/sprite.svg#download"></use>
       </svg>
    </a>
  </div>
</div>

let play = document.querySelectorAll('.track .play');
let playerContainer = document.querySelector('.audio-player-container');
Array.prototype.forEach.call(play, function (item) {
   item.addEventListener('click', function () {
       playerContainer.classList.add('show');
       item.classList.toggle('clicked');
       if (item.classList.contains('clicked')) {
           audioPlayer.api("play");
       } else {
           audioPlayer.api("pause");
       }
   });
});

Есть массив из кнопок play. При клике на play ему добавляется класс clicked, при повторном клике класс убирается. Нужно сделать так чтобы при клике на другую кнопку плей, класс убирался у предыдущей нажатой кнопки и добавлялся текущей нажатой кнопке. Но при этом чтобы работал и toggle класса если нажать на эту кнопку еще раз.