javascript - filter out which span to update -

i have following div collection in html. it's designed dynamically replicate according user interaction.

 <div class="bill-item"> <!-- section single item --> <div class="bill-item-img"> <!-- section item pic --> </div> <div class="bill-item-description"> <!-- section item description , pricing --> <div class="bill-item-name"> <p class="bill-item-name-left">normal cofee</p><p class="bill-item-name-right">170.00</p> <div class="clear"></div> </div> <div class="bill-item-price"> <span>170.00 usd</span> </div>     <div class="bill-item-amount"> <span>2</span> </div> </div> <div class="bill-amount-selection"> <!-- section increment & decrement of item amount goes --> <a class="amount-increase" href="#"></a> <a class="amount-decrease" href="#"></a> </div> </div> 

this html rendered image of elements.

i've written following script increase bill-item-amount span value.

 $(".amount-increase").click(function(){             x+=1;             $(".bill-item-amount span").html(x);         });          $(".amount-decrease").click(function(){             if(!x<=0){                 x-=1;                 $(".bill-item-amount span").html(x);             }         }); 

this works great but, updates value of both span elements. want catch event of clicked element (which now) , increase span value of respective span. how can filter out span update using javascript.?

you should walk dom tree clicked element until reach .bill-item element , go down .bill-item-amount span node

$(".amount-increase").click(function(){     var $span = $(this).parent().parent().find(".bill-item-amount span");     var x = $span.html();     x+=1;     $span.html(x); });  $(".amount-decrease").click(function(){     var $span = $(this).parent().parent().find(".bill-item-amount span");     var x = $span.html();     if(!x<=0){          x-=1;         $span.html(x);     } });