Как правильно переключить класс?

Question

[Smirator]

Приветствую всех!
Не получается правильно реализовать. Мне нужно, чтобы по щелчку на каждое значение в разных полях появлялся класс.
Сейчас класс добавляется только одной кнопке, а должна быть возможность поставить класс на одну из кнопок для каждой группы кнопок.
То есть, из каждого набора значений нужно выбрать одно.
Спасибо!

<div class="user-value-prompt">
          <div class="user-value">
            <p class="calculator-text-value">Высота замка:</p>
            <button class="btn-value-transfer" value="10" onclick="userClick('heigth')">10</button>
            <button class="btn-value-transfer" value="15" onclick="userClick('heigth')">15</button>
            <button class="btn-value-transfer" value="20" onclick="userClick('heigth')">20</button>
          </div>
          <div class="user-value">
            <p class="calculator-text-value">Ширина замка:</p>
            <button class="btn-value-transfer" value="10" onclick="userClick('width')">10</button>
            <button class="btn-value-transfer" value="15" onclick="userClick('width')">15</button>
            <button class="btn-value-transfer" value="20" onclick="userClick('width')">20</button>
          </div>
          <div class="user-value">
            <p class="calculator-text-value">Длина флагштока:</p>
            <button class="btn-value-transfer" value="500" onclick="userClick('length')">500</button>
          </div>
          <div class="user-value">
            <p class="calculator-text-value">количество башен:</p>
            <button class="btn-value-transfer" value="5" onclick="userClick('cube')">5</button>
            <button class="btn-value-transfer" value="10" onclick="userClick('cube')">10</button>
            <button class="btn-value-transfer" value="15" onclick="userClick('cube')">15</button>
          </div>
     </div>

function userClick(name){
      let valueTransfer = document.querySelectorAll('.btn-value-transfer');

      for (let i = 0; i < valueTransfer.length; i++) {
        const value = valueTransfer[i];
        value.addEventListener("click", (e) => toggleActiveClass(e, valueTransfer));
}

    function toggleActiveClass(e) {
      for (let i = 0; i < valueTransfer.length; i++) {
        const value = valueTransfer[i];
       value.classList.remove("btn-value-transfer-active");
      }
      e.target.classList.add("btn-value-transfer-active");
    }

Answer 1

[0xD34F]

document.querySelector('.user-value-prompt').addEventListener('click', ({ target: t }) => {
  if (t.classList.contains('btn-value-transfer')) {
    t.closest('.user-value').querySelectorAll('.btn-value-transfer').forEach(n => {
      n.classList.toggle('btn-value-transfer-active', n === t);
    });
  }
});