how to get work with dynamically inserted fields
<p>i have the below div class 'labouritems' which gets a new instance of it inserted into the dom each time the user clicks on a button.</p>

<p>I need to be able to calculate the '.rate' and '.hours' fields and set the answer to the '.total' field. </p>

<p>Now this is for only the instance of 'labouritems' that the user is working on, ie: should not update the field total on another instance' so basically just work within that row.</p>

<p>Below is the html that i'm working with and below that is the code i have which only works for the first instance of 'labouritems' but when i insert a new one it does not do anything.     </p>

<pre><code> &lt;div class="labouritems"&gt;
        &lt;label for="quote_labouritems_attributes_0_description"&gt;Description&lt;/label&gt;
        &lt;input class="input-medium" id="quote_labouritems_attributes_0_description" name="quote[labouritems_attributes][0][description]" size="30" type="text" value="concrete the house"&gt;
        &lt;label for="quote_labouritems_attributes_0_hours"&gt;Hours&lt;/label&gt;
        &lt;input class="input-mini hours" id="quote_labouritems_attributes_0_hours" name="quote[labouritems_attributes][0][hours]" size="30" type="text" value="33"&gt;
        &lt;label for="quote_labouritems_attributes_0_total"&gt;Total&lt;/label&gt;
        &lt;input class="input-mini total" id="quote_labouritems_attributes_0_total" name="quote[labouritems_attributes][0][total]" size="30" type="text" value="1089"&gt;
        &lt;label for="quote_labouritems_attributes_0_Mup/Hr"&gt;Mup/hr&lt;/label&gt;
        &lt;input class="input-mini" id="quote_labouritems_attributes_0_muphourrate" name="quote[labouritems_attributes][0][muphourrate]" size="30" type="text" value="0"&gt;
          &lt;label for="quote_labouritems_attributes_0_Mup/Total"&gt;Mup/total&lt;/label&gt;
        &lt;input class="input-mini" id="quote_labouritems_attributes_0_muptotal" name="quote[labouritems_attributes][0][muptotal]" size="30" type="text" value="0"&gt;
        &lt;label for="quote_labouritems_attributes_0_Mup/%"&gt;Mup/%&lt;/label&gt;
        &lt;input class="input-mini" id="quote_labouritems_attributes_0_muppercent" name="quote[labouritems_attributes][0][muppercent]" size="30" type="text"&gt;
        &lt;label for="quote_labouritems_attributes_0_Contractor"&gt;Contractor&lt;/label&gt;

        &lt;input class="input-small" data-autocomplete="/contractors/autocomplete_contractor_firstname" data-update-elements="{&amp;quot;id&amp;quot;:&amp;quot;#quote_labouritems_attributes_0_contractor_id&amp;quot;,&amp;quot;hourly_rate&amp;quot;:&amp;quot;#quote_labouritems_attributes_0_contractor_rate&amp;quot;}" id="quote_labouritems_attributes_0_contractor_name" name="quote[labouritems_attributes][0][contractor_name]" placeholder="Seach" size="30" type="text" value="bing lee"&gt;
        &lt;input id="quote_labouritems_attributes_0_contractor_id" name="quote[labouritems_attributes][0][contractor_id]" type="hidden" value="1"&gt;
        &lt;label for="quote_labouritems_attributes_0_Rate/hr"&gt;Rate/hr&lt;/label&gt;
        &lt;input class="input-mini rate" id="quote_labouritems_attributes_0_contractor_rate" name="quote[labouritems_attributes][0][contractor_rate]" size="30" type="text" value="33"&gt;
        &lt;label for="quote_labouritems_attributes_0_Work %"&gt;Work %&lt;/label&gt;
        &lt;input class="input-mini" id="quote_labouritems_attributes_0_progress_percent" name="quote[labouritems_attributes][0][progress_percent]" size="30" type="text" value="55"&gt;
        &lt;label for="quote_labouritems_attributes_0_Work $"&gt;Work $&lt;/label&gt;
        &lt;input class="input-mini" id="quote_labouritems_attributes_0_progress_payment" name="quote[labouritems_attributes][0][progress_payment]" size="30" type="text"&gt;

        &lt;input id="quote_labouritems_attributes_0__destroy" name="quote[labouritems_attributes][0][_destroy]" type="hidden" value="false"&gt;&lt;a href="javascript:void(0)" class="btn btn-small btn-danger remove_nested_fields" data-association="labouritems"&gt;Delete&lt;/a&gt;
    &lt;/div&gt;​




 var LabourItems = {
   rate: null,
   hours: null,
   total: null,
   init: function(object) {
      this.rate = parseInt($(object).children('.rate').first().val(), 10);
      // var rate = $(object).children('.rate').first();
      this.hours =parseInt($(object).children('.hours').first().val(), 10);
      this.total = this.rate * this.hours;
      this.updateTotal(object);
   },
   updateTotal: function(object) {
      $(object).children('.total').first().val(this.total || 0);
   }
}

//reactTochange for those inputs that you want to observe
$('.hours').on("keyup", function() {
   $('.labouritems').each( function(key,value){
      LabourItems.init(this);
   });
});
</code></pre>
