title: How to sum the values from dynamically created input fields
body: <p>I have created Dynamic Add / Remove fields. Everything is working perfectly. I want sum of values from <strong>Amount</strong> field to be displayed on real time basis using JavaScript. I have tried but am unable to do. I am not much familiar with JavaScript.</p>
  
  <p><strong>Following is code:</strong> </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var i = 0;
  
  jQuery(document).ready(function($) {
  
    //fadeout selected item and remove
    $(document).on('click', '#remove-allocation-fields', function(event) {
  
      event.preventDefault();
      $(this).parent().fadeOut(300, function() {
        $(this).parent().empty();
        return false;
  
      });
  
    });
  
    var rows = '&lt;div class="all-allocation-fields"&gt;&lt;div class="row"&gt;&lt;div class="col-5"&gt;&lt;div class="form-group"&gt;&lt;input type="text" class="form-control" name="allocate_items[]"&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="col-5"&gt;&lt;div class="form-group"&gt;&lt;input type="text" class="form-control code" id="code" name="allocate_amount[]"&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="col-2"&gt;&lt;button type="button" class="btn btn-danger" id="remove-allocation-fields"&gt;Remove&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';
  
    //add input
    $('#add-allocation-fields').click(function() {
  
      $(rows).fadeIn("slow").appendTo('#fund-allocation-fields');
      i++;
      return false;
  
    });
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="card"&gt;
    &lt;div class="card-header text-center"&gt;
      &lt;b&gt;Allocation of Funds&lt;/b&gt;
    &lt;/div&gt;
    &lt;div class="card-body"&gt;
  
      &lt;div class="row"&gt;
  
        &lt;div class="col-5"&gt;&lt;label&gt;&lt;b&gt;Allocation Items&lt;/b&gt; &lt;b style="color:#FF0000;"&gt;*&lt;/b&gt;&lt;/label&gt;&lt;/div&gt;
  
        &lt;div class="col-5"&gt;&lt;label&gt;&lt;b&gt;Amount&lt;/b&gt; &lt;b style="color:#FF0000;"&gt;*&lt;/b&gt;&lt;/label&gt;&lt;/div&gt;
  
        &lt;div class="col-2"&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
  
        &lt;div class="col-5"&gt;
  
          &lt;div class="form-group"&gt;
            &lt;input type="text" class="form-control" name="allocate_items[]"&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
  
        &lt;div class="col-5"&gt;
  
          &lt;div class="form-group"&gt;
            &lt;input type="text" class="form-control code" id="code" name="allocate_amount[]"&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
  
        &lt;div class="col-2"&gt;
  
          &lt;button type="button" class="btn btn-success" id="add-allocation-fields"&gt;Add&lt;/button&gt;
  
        &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div id="fund-allocation-fields"&gt;
  
      &lt;/div&gt;
  
      &lt;small class="form-text text-muted"&gt;&lt;i&gt;Total amount must be equal to the goal amount.&lt;/i&gt;&lt;/small&gt;
      &lt;div id="sum"&gt;&lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>