javascript - How to individually increase or decrease a value using jquery

Question

I am looking to increase or decrease each products by clicking + or - button individually, but the issues is when I click any + button.. all products value is increased instead of one, same when i click - button. Kindly help me out how to do this

jquery

 $(document).ready( function(){
    $(".quantity-adder .add-action").click( function(){
        if( $(this).hasClass('add-up') ) {  
            $("[name=quantity]",'.quantity-adder').val( parseInt($("[name=quantity]",'.quantity-adder').val()) + 1 );
        }else {
            if( parseInt($("[name=quantity]",'.quantity-adder').val())  > 1 ) {
                $("input",'.quantity-adder').val( parseInt($("[name=quantity]",'.quantity-adder').val()) - 1 );
            }
        }
    } );

});

HTML

 <div class="product-extra">
    <p>Product 1</p>
                            <div class="quantity-adder pull-left">
                                <div class="quantity-number pull-left">
                                    <span>Qutantity</span>
                                    <input type="text" name="quantity" size="2" value="1" />
                                </div>
                                <div class="quantity-wrapper pull-left">
                                    <span class="add-up add-action fa fa-plus"></span> 
                                    <span class="add-down add-action fa fa-minus"></span>
                                </div>                  
                                <input type="hidden" name="product_id" size="2" value="40" />   
                            </div>                                          

                    </div>
            <br /> 
                             <br /> 
                                   <br /> 

                       <div class="product-extra">
    <p>Product 2</p>
                            <div class="quantity-adder pull-left">
                                <div class="quantity-number pull-left">
                                    <span>Qutantity</span>
                                    <input type="text" name="quantity" size="2" value="1" />
                                </div>
                                <div class="quantity-wrapper pull-left">
                                    <span class="add-up add-action fa fa-plus"></span> 
                                    <span class="add-down add-action fa fa-minus"></span>
                                </div>                  
                                <input type="hidden" name="product_id" size="2" value="44" />   
                            </div>                                          

                    </div>
                       <br /> 
                             <br /> 
                                   <br /> 
                                   <div class="product-extra">
    <p>Product 3</p>
                            <div class="quantity-adder pull-left">
                                <div class="quantity-number pull-left">
                                    <span>Qutantity</span>
                                    <input type="text" name="quantity" size="2" value="1" />
                                </div>
                                <div class="quantity-wrapper pull-left">
                                    <span class="add-up add-action fa fa-plus"></span> 
                                    <span class="add-down add-action fa fa-minus"></span>
                                </div>                  
                                <input type="hidden" name="product_id" size="2" value="48" />   
                            </div>                                          

                    </div>
            <br /> 
                             <br /> 
                                   <br /> 

                       <div class="product-extra">
    <p>Product 4</p>
                            <div class="quantity-adder pull-left">
                                <div class="quantity-number pull-left">
                                    <span>Qutantity</span>
                                    <input type="text" name="quantity" size="2" value="1" />
                                </div>
                                <div class="quantity-wrapper pull-left">
                                    <span class="add-up add-action fa fa-plus"></span> 
                                    <span class="add-down add-action fa fa-minus"></span>
                                </div>                  
                                <input type="hidden" name="product_id" size="2" value="55" />   
                            </div>                                          

                    </div>
                       <br /> 
                             <br /> 
                                   <br /> 

demo link https://jsfiddle.net/sjyq64mj/

Answer 1

DEMO

 $(document).ready(function () {
     $(".quantity-adder .add-action").click(function () {
         if ($(this).hasClass('add-up')) {
             var text = $(this).parent().parent().parent().find("[name=quantity]", '.quantity-adder')


             text.val(parseInt(text.val()) + 1);
         } else {
             var text = $(this).parent().parent().parent().find("[name=quantity]", '.quantity-adder')
             if (parseInt(text.val()) > 1) {


                text.val(parseInt(text.val()) - 1);
             }
         }
     });

 });

I added the .parent() so that then find the proper text to increase