Make this increment/decrement work with multiple inputs in jQuery

I am having a bit of trouble selecting an input. Basically, I need the button to increase or decrease the value of a single input contained in the same element.

Here's the HTML:

<div>
    <label for="name">Adult Males</label>
    <div class="dec button">-</div>
    <input type="text" name="qty" id="1" value="0" />
    <div class="inc button">+</div>
</div>
<div>
    <label for="name">Adult Females</label>
    <div class="dec button">-</div>
    <input type="text" name="adult-female" id="2" value="0"/>
    <div class="inc button">+</div>
</div>

...and the jQuery:

var incrementVar = 0;

$(function() {
    $(".inc").click(function() {
        var newValue = parseInt($(":input[name='qty']").val()) + 1;
        $(":input[name='qty']").val(newValue);
        $('.inc').a开发者_开发技巧ddClass('a' + newValue);
        incrementVar = incrementVar + newValue;
    });
    $(".dec").click(function() {
        var newValue = parseInt($(":input[name='qty']").val()) - 1;
        $(":input[name='qty']").val(newValue);
        $('.inc').addClass('a' + newValue);
        incrementVar = incrementVar + newValue;
    });
});

This works, but only for adult-males at the moment. I want the button to target the input contained in the same div.

incrementVar = 0;
$('.inc.button').click(function(){
    var $this = $(this),
        $input = $this.prev('input'),
        $parent = $input.closest('div'),
        newValue = parseInt($input.val(), 10)+1;
    $parent.find('.inc').addClass('a'+newValue);
    $input.val(newValue);
    incrementVar += newValue;
});
$('.dec.button').click(function(){
    var $this = $(this),
        $input = $this.next('input'),
        $parent = $input.closest('div'),
        newValue = parseInt($input.val(), 10)-1;
    $parent.find('.inc').addClass('a'+newValue);
    $input.val(newValue);
    incrementVar += newValue;
});

Demo

Here's some code that will do that for you. The key is to go up to the parent of the button that's clicked and find the input that's in that parent. That will get you the right one to operate on. I also made these changes/improvements:

1. I put all the code in a function that both increment and decrement can call.
2. I added the radix to parseInt() which is required unless you want it to guess.
3. I made it so the decrement can't make it go below zero.
4. I fixed the id values on the input elements to be legal values (an id can't start with an number).

Here's the new code:

$(".inc").click(function() {
    updateValue(this, 1);
});
$(".dec").click(function() {
    updateValue(this, -1);
});

function updateValue(obj, delta) {
    var item = $(obj).parent().find("input");
    var newValue = parseInt(item.val(), 10) + delta;
    item.val(Math.max(newValue, 0));
}

Working example here: http://jsfiddle.net/jfriend00/Y6tFj/

I removed the class changes as they didn't make sense to me because you're constantly adding new classes to all the increment/decrement buttons which I don't think is accomplishing whatever you were trying to do.

I also didn't know what you were trying to do with the incrementVar.

You can use the prev() and next() the find the element, instead of using selector.

See it in action: http://jsfiddle.net/william/t4Np7/1/.

Your input element inside the adult female section is named adult-female and not qty. You can adjust your selector to use jQuery's next ala $(this).next(":input").

You can use :

var input = $(this).siblings(":input[name='qty']").get(0)

and then

var newValue = parseInt(input.value) + 1;
$(input).val(newValue);

Use

 var newValue = parseInt( $(this).prev(":input[name='qty']").val()) + 1;

instead of

 var newValue = parseInt($(":input[name='qty']").val()) + 1;

and

use

 var newValue = parseInt( $(this).next(":input[name='qty']").val()) - 1;

instead of

 var newValue = parseInt($(":input[name='qty']").val()) - 1;

Ref:

• Documentation for .prev()

• Documentation for .next()