Как сделать input количества для айтемов в меню независимым друг для друга в этом JS?

Question

[Valeriy_Morozov]

Вот мой JS

const myInput = document.getElementById("my-input");
function stepper(btn){
    let id = btn.getAttribute("id");
    let min = myInput.getAttribute("min");
    let max = myInput.getAttribute("max");
    let step = myInput.getAttribute("step");
    let val = myInput.getAttribute("value");
    let calcStep = (id == "increment") ? (step*1) : (step * -1);
    let newValue = parseInt(val) + calcStep;

    if(newValue >= min && newValue <= max){
        myInput.setAttribute("value", newValue);
    }
}

Вот часть моего HTML ( он повторяется для каждого айтема в меню )

<div class="single-menu">
      <div class="myContainer">
        <button id="decrement" onclick="stepper(this)">-</button>
        <input
          type="number"
          min="0"
          max="100"
          step="1"
          value="0"
          id="my-input"
          readonly
        />
        <button id="increment" onclick="stepper(this)">+</button>
      </div>
      <img src="https://via.placeholder.com/150" alt="" />
      <div class="menu-content">
        <h4>chicken fried salad <span>$45</span></h4>
        <p>
          Aperiam tempore sit,perferendis numquam repudiandae porro
          voluptate dicta saepe facilis.
        </p>
      </div>
    </div>

Вот скрин сайта

Как вы видите я использую много айтемов, но на какой бы плюс из них я бы не нажал - всегда трирится первый и увеличивает значение первого айтема.
Я понимаю почему (я всегда вызываю один и тот же метод JS, который вызывает один и тот же айди).
Но как же мне сделать эти айтемы независимыми от друг друга? Чтобы я мог создать форму и нормально передать, сколько и чего выбрали юзеры.
P.S. я знаю, что id нельзя использовать несколько раз и JS выглядит странно.

Comments

[キム ファイブプラス]

я знаю, что id нельзя использовать несколько раз

и? какой из этого вывод?

[Олег]

Вы можете переписать ваш html+js под использование классов

Answer 1

[Александр Смирнов]

У вас ошибка доступа к элементу input. По спецификации на весь документ можно использовать только один id, поэтому у вас любое событие меняет только один первый input. Правильней будет получать элементы по классу и на каждый элемент вешать обработчик клика. Но поскольку, вам нужно кликом по одному элементу менять свойства другого элемента, то задача немного усложняется. В моем примере JS сначала читает родительские элемент кнопок и инпута, а потом уже для каждой группы читает атрибуты и вешает обработчики событий

Comments

[Valeriy_Morozov]

Спасибо!