I have the following div collection in my HTML. It's designed to dynamically replicate according to user interaction. \[code\] <div class="bill-item"><!-- Section for a single item --><div class="bill-item-img"><!-- Section for Item pic --></div><div class="bill-item-description"><!-- Section for Item description and 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 where the increment & decrement of item amount goes --><a class="amount-increase" href="http://stackoverflow.com/questions/15897755/#"></a><a class="amount-decrease" href="http://stackoverflow.com/questions/15897755/#"></a></div></div>\[/code\]This is the HTML Rendered image of the elements.
I've written the following script to increase the bill-item-amount span value.\[code\] $(".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); } });\[/code\]This works great but, it updates the value of both the span elements. what I want is to catch the event of the clicked element (which I do now) and increase the span value of the respective span. How can I filter out which span to update using javascript.?