Как правильно выводить данные из дата атрибутов родителей в дочерние элементы в определенном порядке?

Question

[Andy Koshman]

Всем привет, у меня есть 3 родительских блока <div class="tariff__counter" data-seats="..."> в котором имеется определенное количество счетчиков <div class="tariff__counter-block">, так же родительские блоки имеют в наличии дата атрибуты с данными в виде цифры (data-seats="1"), цифра является ограничителем для дочерних счетчиков, то есть если в первом tariff__counter дата атрибут равен 1, то у счетчика будет ограничение в виде не больше 1. В общем какая цифра будет в дата атрибуте родителя, то та цифра и будет являться ограничителем по кликам на дочерних счетчиках.
Я подумал, что по поводу дата атрибутов, задачу можно решить с помощью вложенного цикла где изначально перебираются родители счетчиков с выуживанием дата атрибутов, а потом в дочернем цикле выводить количество дата атрибутов относительно количества счетчиков у родителя. Но у меня не получается это реализовать, в данном случае дата атрибуты как ограничители счетчиков должны выводиться вот таким образом:
счетчик 1
-----------
счетчик 2
счетчик 2
-----------
счетчик 3
счетчик 3
счетчик 3
Как можно это реализовать?

https://jsfiddle.net/hwn3edx9/1/

<div class="tariff__counter" data-seats="1">
  <div class="tariff__counter-block">
    <button class="counter__minus-one">-</button>
    <button class="counter__plus-one">+</button>
    <input type="number" class="amount" min="0" value="0">
    <span class="tariff__counter-max"></span>
  </div>
</div>
<hr>
<div class="tariff__counter" data-seats="2">
  <div class="tariff__counter-block">
    <button class="counter__minus-one">-</button>
    <button class="counter__plus-one">+</button>
    <input type="number" class="amount" min="0" value="0">
    <span class="tariff__counter-max"></span>
  </div>
  <div class="tariff__counter-block">
    <button class="counter__minus-two">-</button>
    <button class="counter__plus-two">+</button>
    <input type="number" class="amount" min="0" value="0">
    <span class="tariff__counter-max"></span>
  </div>
</div>
<hr>
<div class="tariff__counter" data-seats="3">
  <div class="tariff__counter-block">
    <button class="counter__minus-one">-</button>
    <button class="counter__plus-one">+</button>
    <input type="number" class="amount" min="0" value="0">
    <span class="tariff__counter-max"></span>
  </div>
  <div class="tariff__counter-block">
    <button class="counter__minus-two">-</button>
    <button class="counter__plus-two">+</button>
    <input type="number" class="amount" min="0" value="0">
    <span class="tariff__counter-max"></span>
  </div>
  <div class="tariff__counter-block">
    <button class="counter__minus-two">-</button>
    <button class="counter__plus-two">+</button>
    <input type="number" class="amount" min="0" value="0">
    <span class="tariff__counter-max"></span>
  </div>
</div>

const counterWrapper = document.querySelectorAll('.tariff__counter')
const tariffCounterMax = document.querySelectorAll('.tariff__counter-max')
let max;

//перебираю родителей с дата атрибутами
for (let i = 0; i < counterWrapper.length; i++) {
  const seats = +counterWrapper[i].dataset.seats;

  //перебираю дочерние спаны у каждого родителя
  for (let j = 0; j < tariffCounterMax.length; j++) { //tariffCounterMax.length в каждом родительском блоке tariff__counter должен быть равен своему нынешнему количеству 
    tariffCounterMax[j].innerHTML = seats //должно выводиться вот так 1 22 333
    max = seats
  }
}

const min = Math.min(0);

counterWrapper.forEach((button) => {
  button.addEventListener("click", (e) => {
    const isPlusBtnOne =
      e.target.classList.contains("counter__plus-one");
    const isMinusBtnOne =
      e.target.classList.contains("counter__minus-one");
    const isPlusBtnTwo =
      e.target.classList.contains("counter__plus-two");
    const isMinusBtnTwo =
      e.target.classList.contains("counter__minus-two");
    const counterBlock = e.target.closest(".tariff__counter-block");

    if (isPlusBtnOne || isMinusBtnOne || isPlusBtnTwo || isMinusBtnTwo) {
      const amount = counterBlock.querySelector(".amount");
      if (
        isPlusBtnOne || isPlusBtnTwo) {
        amount.value = Number(amount.value) + 1;
        if (amount.value >= max) {
          amount.value = max;
        }
      }
      if (isMinusBtnOne || isMinusBtnTwo) {
        amount.value = Number(amount.value) - 1;
        if (amount.value <= min) {
          amount.value = min;
        }
      }
    }
  });
});

Answer 1

[0xD34F]

document.addEventListener('click', updateCounter);
document.addEventListener('input', updateCounter);

document.querySelectorAll('.tariff__counter').forEach(n => {
  const max = n.dataset.seats;
  n.querySelectorAll('.tariff__counter-max').forEach(m => m.innerText = max);
  n.querySelectorAll('.amount').forEach(m => m.max = max);
  n.querySelectorAll('button').forEach(m => m.dataset.change = m.innerText === '+' ? 1 : -1);
});

function updateCounter({ target: t }) {
  const input = t.closest('.tariff__counter-block')?.querySelector('.amount');
  if (input) {
    const { min, max, value } = input;
    input.value = Math.max(min, Math.min(max, (value | 0) + (t.dataset.change | 0)));
  }
}

Comments

[Andy Koshman]

Спасибо, все отлично работает. Буду разбираться в данной реализации.