Increase Decrease input for multiple menu items, how can this be done?

Here is my JS script

 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);
    }
}

Here is a part of html, I have multiple of those repeating.

       <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>

As you can see by the image below, I try to make a menu where person can choose quantity of the items in it and then order. But the problem is that this script increases the quantity only of the first item, I do know why ( because I call same method that uses the same ids ), but is there any way to make them independent from each other? I will load data from DB and the amout of items may vary.

I do appreciate your help.

P.S. I do know that I shouldn't use ID's twice and JS script can be optimized.

Why don't we start by separating the function of increasing and decreasing?

In my code, I found input element by previousElementSibling and nextElementSibling without looking for id. So, It can also respond to dynamically increasing elements.

It's not a very nice code, but I hope it helps.

   <div class="single-menu">
     <div class="myContainer">
       <button onclick="stepperDecrement(this)">-</button>
       <input
              type="number"
              min="0"
              max="100"
              step="1"
              value="0"
              readonly
              />
       <button onclick="stepperIncrement(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>
<div class="single-menu">
  <div class="myContainer">
    <button onclick="stepperDecrement(this)">-</button>
    <input
           type="number"
           min="0"
           max="100"
           step="1"
           value="0"
           readonly
           />
    <button onclick="stepperIncrement(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>

function stepperDecrement(btn){
    const inputEl = btn.nextElementSibling;
    const calcStep =inputEl.step * -1;
    const newValue = parseInt(inputEl.value) + calcStep;
    if(newValue >= inputEl.min && newValue <= inputEl.max){
        inputEl.value = newValue;
    }
}
function stepperIncrement(btn){
    const inputEl = btn.previousElementSibling;
    const calcStep = inputEl.step * 1;
    const newValue = parseInt(inputEl.value) + calcStep;
    if(newValue >= inputEl.min && newValue <= inputEl.max){
        inputEl.value = newValue;
    }
}