кнопки play на js

let musicBoxBtn = document.querySelectorAll('.header__music-box-btn');

for (let btn of musicBoxBtn) {   
  btn.addEventListener('click', function () {        
    let musicBoxPause = btn.parentElement.querySelector('.header__music-box-svg-pause');
     
    musicBoxBtn.forEach(el => {
      let elem = el.querySelector('.header__music-box-svg-pause');
      // удалять надо у всех, кроме текущего
      if (elem !== musicBoxPause) {
        elem.classList.remove('header__music-box-svg-pause_acive');
      }
    })
    
    // toggle удаляет если класс есть и добавляет, если его нет
    musicBoxPause.classList.toggle('header__music-box-svg-pause_acive');
  });
}

button {
  padding: 0;
  border: none;
}
.header__music-box {
  position: relative;
  width: 175px;
  padding: 12px 0;
}
.header__music-box-svg-pause {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  fill: #A1A6B4;
  transition: fill .3s ease-in-out, opacity .3s ease-in-out;
}
.header__music-box-svg-pause_acive {
  opacity: 1;
}
.header__music-box:last-of-type {
  margin-right: 43px;
}
.header__music-box::before {
  content: '';
  position: absolute;
  width: 1px;
  height: 40px;
  top: 9px;
  left: -7px;
  background: #E6E8EC;
}
.header__music-box:last-of-type::after {
  content: '';
  position: absolute;
  width: 1px;
  height: 40px;
  top: 9px;
  right: 8px;
  background: #E6E8EC;
}
.header__music-box-btn {
  position: relative;
  left: 3px;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  align-self: center;
  outline: none;
}
.header__music-box-btn svg path{
  fill: #A1A6B4;
  transition: fill .3s ease-in-out;
}
.header__music-box-descr {
  flex-direction: column;
  text-align: center;
}
.header__music-box-on-air {
  padding-left: 3px;
  margin-bottom: 5px;
  font-weight: 400;
  font-size: 12px;
  line-height: 12px;
  color: #A1A6B4;
}
.header__music-box-on-air-descr {
  font-size: 16px;
  line-height: 16px;
}

<div class="header__music-box flex">
  <button class="header__music-box-btn">
      <svg class="header__music-box-svg" width="24" height="24" viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg">
          <g clip-path="url(#clip0_24531_5430)">
              <path
                  d="M12 2C6.475 2 2 6.475 2 12C2 17.525 6.475 22 12 22C17.525 22 22 17.525 22 12C22 6.475 17.525 2 12 2ZM10 16.5V7.5L16 12L10 16.5Z" />
          </g>
          <defs>
              <clipPath id="clip0_24531_5430">
                  <rect width="24" height="24" fill="white" />
              </clipPath>
          </defs>
      </svg>
      <svg class="header__music-box-svg-pause" width="24" height="24" viewBox="0 0 24 24"
          fill="none" xmlns="http://www.w3.org/2000/svg">
          <g clip-path="url(#clip0_24531_3491)">
              <path
                  d="M12 2C6.475 2 2 6.475 2 12C2 17.525 6.475 22 12 22C17.525 22 22 17.525 22 12C22 6.475 17.525 2 12 2Z" />
              <rect x="9" y="8" width="2" height="8" rx="1" fill="white" />
              <rect x="13" y="8" width="2" height="8" rx="1" fill="white" />
          </g>
          <defs>
              <clipPath id="clip0_24531_3491">
                  <rect width="24" height="24" fill="white" />
              </clipPath>
          </defs>
      </svg>
  </button>
  <div class="header__music-box-descr flex">
      <span class="header__music-box-on-air">
          Ранее в&nbsp;эфире
      </span>
      <span class="header__music-box-on-air-descr">
          &laquo;Музыка&raquo;
      </span>
  </div>
</div>
<div class="header__music-box flex">
  <button class="header__music-box-btn">
      <svg class="header__music-box-svg" width="24" height="24" viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg">
          <g clip-path="url(#clip0_24531_5430)">
              <path
                  d="M12 2C6.475 2 2 6.475 2 12C2 17.525 6.475 22 12 22C17.525 22 22 17.525 22 12C22 6.475 17.525 2 12 2ZM10 16.5V7.5L16 12L10 16.5Z" />
          </g>
          <defs>
              <clipPath id="clip0_24531_5431">
                  <rect width="24" height="24" fill="white" />
              </clipPath>
          </defs>
      </svg>
      <svg class="header__music-box-svg-pause" width="24" height="24" viewBox="0 0 24 24"
          fill="none" xmlns="http://www.w3.org/2000/svg">
          <g clip-path="url(#clip0_24531_3491)">
              <path
                  d="M12 2C6.475 2 2 6.475 2 12C2 17.525 6.475 22 12 22C17.525 22 22 17.525 22 12C22 6.475 17.525 2 12 2Z" />
              <rect x="9" y="8" width="2" height="8" rx="1" fill="white" />
              <rect x="13" y="8" width="2" height="8" rx="1" fill="white" />
          </g>
          <defs>
              <clipPath id="clip0_24531_3491">
                  <rect width="24" height="24" fill="white" />
              </clipPath>
          </defs>
      </svg>
  </button>
  <div class="header__music-box-descr flex">
      <span class="header__music-box-on-air">
          Сейчас в&nbsp;эфире
      </span>
      <span class="header__music-box-on-air-descr">
          &laquo;Как так?&raquo;
      </span>
  </div>
</div>