unable to populate field on each instance of div elements
<p>i have the below code which i'm unable to populate the total field in each individual row of elements.</p>

<p>So each field dynamically inserted will have the same fields, i just need to calculate the fields within that row only.</p>

<p>Here is the jsfiddle for it <a href="http://jsfiddle.net/glennmartin/3TnyR/" rel="nofollow">http://jsfiddle.net/glennmartin/3TnyR/</a></p>

<pre><code>var LabourItems = {
   rate: null,
   hours: null,
   total: null,
   init: function(object) {
      var rate = parseInt($(object).children('.rate').val(), 10);
      // var rate = $(object).children('.rate').first();
      var hours =parseInt($(object).children('.hours').val(), 10);
      this.total = Number(rate.val()) * Number(hours.val());
      this.updateTotal(object);
   },
   updateTotal: function(object) {
      $(object).children('.total').first().attr('value', this.total)
   }
}

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