I have created an Add / Remove input fields. I want to get total of 'Amount' using Javascript which should not exceed 100%. Means the total of amount should not exceed `10000`.

Say for example first field will have `3000`, second will have `6000` and third will have `1000`. If we enter larger number it should not accept it. 

```js
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 = '<div class="fund-fields"><div class="row"><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="allocate_items[]" placeholder=""></div></div><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="allocate_amount[]" placeholder=""></div></div><div class="col-md-2"><button type="button" class="btn btn-danger" id="remove-allocation-fields"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</button></div></div><div class="clear"></div></div>';

  //add input
  $('#add-allocation-fields').click(function() {
    $(rows).fadeIn("slow").appendTo('#fund-allocation-fields');
    i++;
    return false;
  });
});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="panel panel-default">
  <div class="panel-heading">
    <center><b>Allocation of Funds</b></center>
  </div>
  <div class="panel-body">
    <div class="row">
      <div class="col-md-5">
        <label>Allocation Items <b style="color:#FF0000;">*</b></label>
      </div>
      <div class="col-md-5">
        <label>Amount <b style="color:#FF0000;">*</b></label>
      </div>
      <div class="col-md-2"></div>
    </div>
    <div class="row">
      <div class="col-md-5">
        <div class="form-group">
          <input type="text" class="form-control" name="allocate_items[]" placeholder="">
        </div>
      </div>
      <div class="col-md-5">
        <div class="form-group">
          <input type="text" class="form-control" name="allocate_amount[]" placeholder="">
        </div>
      </div>
      <div class="col-md-2">
        <button type="button" class="btn btn-success" id="add-allocation-fields">
          <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 
          Add
        </button>
      </div>
    </div>
    <div id="fund-allocation-fields"></div>
    <p class="help-block"><i>Total amount must be equal to the goal amount.</i></p>
  </div>
</div>
```

Please Help me. Thanks in advance.