May 10, 2026

Increment Decement multiple input box

<div class="quantity">
       <div class="cart_quantity_selector">
         <button class="plus">Plus</button>
         <input type="text" name="updates[]" value="1">
         <button class="minus">Minus</button>
       </div>
     </div>
 <br />
 <div class="quantity">
       <div class="cart_quantity_selector">
         <button class="plus">Plus</button>
         <input type="text" name="updates[]" value="1">
         <button class="minus">Minus</button>
       </div>
     </div>

 

 document.querySelectorAll('.quantity button').forEach((button) => {
  button.addEventListener('click', (e) => {
    const isPlus = button.classList.contains('plus');
    const input = button.parentElement.querySelector('input');
    const value = Number(input.value);
    if (isPlus) {
      input.value = value + 1;
    } else if (value > 1) {
      input.value = value - 1;
    }
  });
});

 

Leave a Reply

Your email address will not be published. Required fields are marked *