function roleDescription() {
    // вторая ступень = описание роли при наведении, выбор роли при клике
    for (let i = 0; i < originDescription.length; i++) {
      buttons[i].addEventListener('mouseover', asignDesc.bind(buttons[i], i));
      buttons[i].addEventListener('click', asignRole.bind(buttons[i], i), {
        once: true
      });
    }
  }

  function asignRole(i) {
    playerrole = role[i];
    alert(playerrole);
    makeSpecial();
  }

  function asignDesc(i) {
    maintext.textContent = originDescription[i];
    maintext.style.fontSize = '15px';
  }

  function makeSpecial() {
    // третья ступень - подтирание следов от выбора роли, смена кнопок на другие
    for (let i = 0; i < originDescription.length; i++) {
      buttons[i].removeEventListener('mouseover', asignDesc.bind(buttons[i], i));
      buttons[i].removeEventListener('click', asignRole.bind(buttons[i], i), {
        once: true
      });
    }
  }

i have four buttons for player to choose from and i want to player when he clicks one buttons function to assign role will be removed and he could proceed to the next step. i've declared buttons from the cycle and tried to remove buttons from the cycle, but no luck. how can i remove buttons without making very long code? or where am i mistaken with that one?