How to make 3 buttons(same class ,increment on click) that each target individual input fields(number) to work, and not just the last input field?

Question

I am currently working on a webshop, and I'm trying to create a product quantity button. I have three increments and three decrement buttons with the same classes. I'm trying to make them each target their own input field. But what happens to me is that no matter which of the three buttons I click, it only works on the third input field. I am fairly new to javascript and could use any help. Thank you.

My work so far:

Javascript:

 var elem = [].slice.call(document.querySelectorAll('input[type="number"]')).pop()


document.querySelectorAll(".product-quantity-button-up").forEach(function(button){
    button.addEventListener("click",function(){

        elem.value =Number(elem.value) + 1;
    })
})

document.querySelectorAll(".product-quantity-button-down").forEach(function(button){
    button.addEventListener("click",function(){
        elem.value =Number(elem.value) - 1;
        if(elem.value<=0){
            elem.value=0
        }
    })
})

html (same code x 3)

user_20003923 · Answer

use this code instead for the same

$('.product-quantity-button-container').each(function(input){
  var elem = $(this).find('input[type="number"]')[0];
  var button_up =$(this).find(".product-quantity-arrow-container .button-up")[0];
  $(button_up).on("click",function(){
        elem.value =Number(elem.value) + 1;
  });
  var button_down =$(this).find(".product-quantity-arrow-container .button-down")[0];
  $(button_down).on("click",function(){
        elem.value =Number(elem.value) - 1;
        if(elem.value<=0){
            elem.value=0
        }
  });  
});

user_2813224 · Answer

I changed the classes to something less verbose and removed unnecessary

s. The original layout of OP will still function properly with the example, just be mindful of the classes -- they must be changed either in OP or in the example if keep the original HTML.

Details are commented in example

/**
Collect all

html {
  font: 300 2ch/1.2 Consolas
}

input,
button {
  font: inherit
}

input {
  display: block;
  width: 77px;
  border: 0;
  outline: 0;
  font-size: 1.5rem;
  text-align: center;
}

button {
  border: 0;
  padding: 5px 3px 0;
  background: transparent;
  cursor: pointer
}

button:hover,
button:active {
  background: rgba(193, 211, 233, 0.6);
}

How to make 3 buttons(same class ,increment on click) that each target individual input fields(number) to work, and not just the last input field?

2 Answers