Question

Fiddle: http://jsfiddle.net/MhWm5/16/

I have some dynamically generated table rows/values with dynamic IDs

<td class="control-group">
    <input name="price[418]" class="price" value="199.00">
    <span class="calcprice">I want this SPAN tag to update</span>
</td>
<td  class="control-group">
    <input name="price[424]" class="price" value="67.00">
    <span class="calcprice">I DO NOT WANT this SPAN tag to update</span>
</td>

I have a simple jQuery keyup function designed to update the SPAN here:

$('.price').keyup(function() {

   var AskPrice    = $(this).val();
   var calcSpan    = ".calcprice";
   var itemCost = AskPrice * (.8);
   console.log(itemCost);  // just for giggles

   $(this).parents().find(calcSpan).text(" You will receive $" + itemCost );

});    ​  ​

When the user types in the first input field, the span is updated in both table rows which is what I do not want. I can adjust the name of the class on each span, but I don’t think that helps.

Any helps is great.

Answer 1

I would use the siblings() function to do this.

See example: http://jsfiddle.net/MhWm5/26/

Also note that I had to change your markup. You had td tags that were not nested in a table or tr and so it was not being rendered like you thought it would be. This actually may have been the root cause of your issue.