title: jquery calculation and sum of dynamic input fields
body: <p>I've made a form with dynamic input fields, for insert of numbers, where first input is static and other 5 are dynamically made with script. Now, I wanna to sum all inserted numbers into 7th input id-ed #income_sum. Everything works great with static input fields, I've checked on two fields and it works, also, it works with that one static field in my example. But my problem is, when I enter a number in one of dynamic fields it doesn't sums in #income_sum, and they are given class .income_count as in that one static field.</p>
  
  <p>here is my html:</p>
  
  <pre><code>&lt;form class="form-horizontal" id="whereEntry" method='post' action=''&gt;
     &lt;fieldset&gt;
  
        &lt;div class="control-group"&gt;
          &lt;div class="controls controls-row"&gt;
              &lt;input type="text" class="span3 register_input" id="main_activity" name="main_activity" placeholder="Company's main activity"&gt;
                &lt;input type="text" class="span1 register_input income_count" id="income" name="income" placeholder="% of income"&gt;
                 &lt;/div&gt;
                  &lt;/div&gt;
  
  &lt;div class="control-group"&gt;
  &lt;div class="controls controls-row"&gt;
      &lt;div id="InputsIncomeWrapper"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
      &lt;input type="text" class="span1 register_input pull-right" id="income_sum" name="income_sum"&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
      &lt;a href="#" id="AddMoreIncomeBox" class="btn btn-info pull-right"&gt;&lt;i class="icon-plus"&gt;&lt;/i&gt;Add More&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
         &lt;/fieldset&gt;
         &lt;/form&gt;
  </code></pre>
  
  <p>calculation script:</p>
  
  <pre><code>//calculation script
  var $form = $('#whereEntry'),
  $summands = $form.find('.income_count'),
  $sumDisplay = $('#income_sum');
  
  $form.delegate('.income_count', 'change', function ()
  {
  var sum = 0;
  $summands.each(function ()
  {
      var value = Number($(this).val());
      if (!isNaN(value)) sum += value;
  });
  
  $sumDisplay.val(sum);
  });
  </code></pre>
  
  <p>dynamic field script:</p>
  
  <pre><code>//add dynamic field script
  $(document).ready(function() {
  
  var MaxInputs       = 5; //maximum input boxes allowed
  var InputsWrapper   = $("#InputsIncomeWrapper"); //Input boxes wrapper ID
  var AddButton       = $("#AddMoreIncomeBox"); //Add button ID
  
  var x = InputsWrapper.length; //initlal text box count
  var FieldCount=1; //to keep track of text box added
  
  $(AddButton).click(function (e)  //on add input button click
  {
      if(x &lt;= MaxInputs) //max input box allowed
      {
          FieldCount++; //text box added increment
          //add input box
          $(InputsWrapper).append('\
          &lt;div&gt;\
          &lt;input type="text" class="register_input span3"\
          name="main_activity_'+ FieldCount +'" id="main_activity_'+ FieldCount +'"\
          placeholder="Company´s other activity" style="margin:0px 15px 20px 0px"/&gt;\
          &lt;input type="text" class="span1 register_input income_count" id="income_'+ FieldCount +'"\
          name="income_'+ FieldCount +'" placeholder="% of income"\ style="margin:0px 15px 20px 15px"/&gt;\
          &lt;a href="#" class="removeclass pull-left"&gt;&lt;i class="icon-remove icon-remove-addincome"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;');
          x++; //text box increment
      }
  return false;
  });
  
  $("body").on("click",".removeclass", function(e){ //user click on remove text
      if( x &gt; 1 ) {
              $(this).parent('div').remove(); //remove text box
              x--; //decrement textbox
      }
  return false;
  }) 
  
  });
  </code></pre>
  
  <p>here is jsfiddle of current situation: <a href="http://jsfiddle.net/Uwbe6/" rel="nofollow">http://jsfiddle.net/Uwbe6/</a></p>
  
  <p>anyone help? I know that problem is in those dynamic fields, but don't know how to solve it.
  possible solution in my jsfiddle update?</p>
  
  <p>thanks</p>