Increment/Decrement Counter for 3 Buttons?

Question

I have three buttons like this on my site:

I'm trying to increment and decrement the counters but it's only working for two, the first works fine but the second is adding 2 to every increment and the third isn't working at all.

Here is the code:

 $('.plus').on('click', function(e) { var val = parseInt($(this).prev('input').val()); $(this).prev('input').val(val + 1); console.log(val); }); $('.minus').on('click', function(e) { var val = parseInt($(this).next('input').val()); if (val !== 0) { $(this).next('input').val(val - 1); } if (val == 0) { $(this).next('input').val(1); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label class="quantitiy" for="Quantity-collection-template-new"></label> <input class="minus minus1" type="button" value="-"> <input type="number" id="Quantity-collection-template-new" name="quantity" value="1" min="1" class="product-form__input qty" pattern="[0-9]*" data-quantity-input=""> <input class="plus plus1" type="button" value="+"> <label class="quantitiy" for="Quantity-collection-template-new"></label> <input class="minus minus2" type="button" value="-"> <input type="number" id="Quantity-collection-template-new" name="quantity" value="1" min="1" class="product-form__input qty" pattern="[0-9]*" data-quantity-input=""> <input class="plus plus2" type="button" value="+"> <label class="quantitiy" for="Quantity-collection-template-new"></label> <input class="minus minus3" type="button" value="-"> <input type="number" id="Quantity-collection-template-new" name="quantity" value="1" min="1" class="product-form__input qty" pattern="[0-9]*" data-quantity-input=""> <input class="plus plus3" type="button" value="+">

Answer 1

It's easier to answer this here.

You're using .plus1 and .plus2 but there's no .plus3 bindings on the website. Which is different from what you posted here, that's why is working, so, my advice is:

Just remove the duplicate and use the same logic here, try it again and let us know.

  $('.plus').on('click', function(e) { // omitted  });
  $('.minus').on('click', function(e) { // omitted });

This is what you have right now on the website:

$('.plus1').on('click', function(e) {
    var val = parseInt($(this).prev('input').val());
    $(this).prev('input').val(val + 1);
});
$('.minus1').on('click', function(e) {
    var val = parseInt($(this).next('input').val());
    if (val !== 0) {
        $(this).next('input').val(val - 1);
    }
    if (val == 0) {
        $(this).next('input').val(1);
    }
});

And another section;

$('.plus2').on('click', function(e) {
    var val = parseInt($(this).prev('input').val());
    $(this).prev('input').val(val + 1);
});
$('.minus2').on('click', function(e) {
    var val = parseInt($(this).next('input').val());
    if (val !== 0) {
        $(this).next('input').val(val - 1);
    }
    if (val == 0) {
        $(this).next('input').val(1);
    }
});

A couple of suggestions;

Don't use the same id, create some logic to add at least an index for each id if they represent more or less the same thing. product-1 and product-2 and so on. Same Id is recipe for disaster and a no-no from the start.

Remember to update both id and for properties with unique identifiers.

minus/plus - index works.