JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent-block">
<div class="child-block" id="11">
<span>количество человек 1 кабина</span>
<div class="elem" data-id="1">
    <span>Взрослый</span>
    <button class="btn__minus-one">-</button>
    <button class="btn__plus-one">+</button>
    <input type="number" class="amount amount-one" min="0" max="2" value="0">
  </div>
  <div class="elem" data-id="2">
    <span>Подросток</span>
    <button class="btn__minus-one">-</button>
    <button class="btn__plus-one">+</button>
    <input type="number" class="amount amount-one" min="0" max="2" value="0">
  </div>
  <div class="elem" data-id="3">
    <span>Ребенок до 10</span>
    <button class="btn__minus-one">-</button>
    <button class="btn__plus-one">+</button>
    <input type="number" class="amount amount-one" min="0" max="2" value="0">
  </div>
  <div class="elem" data-id="4">
    <span>Ребенок до 5</span>
    <button class="btn__minus-one">-</button>
    <button class="btn__plus-one">+</button>
    <input type="number" class="amount amount-one" min="0" max="2" value="0">
  </div>
  <div class="elem" data-id="5">
    <span>Грудничок</span>
    <button class="btn__minus-one">-</button>
    <button class="btn__plus-one">+</button>
    <input type="number" class="amount amount-one" min="0" max="2" value="0">
  </div>
  <button class="btn-all">get</button>
</div>
<div class="child-block" id="12">
<span>количество человек 2 кабина</span>
  <div class="elem" data-id="1">
    <span>Взрослый</span>
    <button class="btn__minus-two">-</button>
    <button class="btn__plus-two">+</button>
    <input type="number" class="amount amount-two" min="0" max="2" value="0">
  </div>
  <div class="elem" data-id="2">
    <span>Подросток</span>
    <button class="btn__minus-two">-</button>
    <button class="btn__plus-two">+</button>
    <input type="number" class="amount amount-two" min="0" max="2" value="0">
  </div>
  <div class="elem" data-id="3">
    <span>Ребенок до 10</span>
    <button...

CSS

.parent-block {
  display: flex;
  justify-content: space-evenly;
}

JavaScript

const childBlock = document.querySelectorAll('.child-block')
const elem = document.querySelectorAll('.elem');
const amount = document.querySelectorAll('.amount')

document.querySelectorAll('.btn-all').forEach(n => {
  n.addEventListener('click', onGetDataClick);
});

let data;
function onGetDataClick({
  target
}) {
  data = Array
    .from(target.closest('.child-block').querySelectorAll('.elem'))
    .flatMap(n => Array(+n.querySelector('input').value).fill(+n.dataset.id));

  console.log(data);

  let obj = new URLSearchParams({
    "ID[]": data,
  });
  for (const data of obj.get(
      "ID[]"
    )) {
    console.log("ID: ", data);
    console.log("ID: ", typeof data);
  }
}



//counter
let max = Math.max(2)
let min = Math.min(0)
childBlock.forEach((button) => {
  button.addEventListener("click", (e) => {
    const isPlusBtnOne =
      e.target.classList.contains("btn__plus-one");
    const isMinusBtnOne =
      e.target.classList.contains("btn__minus-one");
    const isPlusBtnTwo =
      e.target.classList.contains("btn__plus-two");
    const isMinusBtnTwo =
      e.target.classList.contains("btn__minus-two");
    const counterBlock = e.target.closest(".elem");
    if (isPlusBtnOne || isMinusBtnOne || isPlusBtnTwo || isMinusBtnTwo) {
      const input = counterBlock.querySelector(".amount");
      if (isPlusBtnOne || isPlusBtnTwo) {
        input.value = Number(input.value) + 1;
        if (input.value >= max) {
          input.value = max;
        }
      }
      if (isMinusBtnOne || isMinusBtnTwo) {
        input.value = Number(input.value) - 1;
        if (input.value <= min) {
          input.value = min;
        }
      }
    }
  })
})