Add dynamic inputs

by TheOrdinaryGeek

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/css/bootstrap-responsive.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://rawgit.com/eu81273/jsfiddle-console/master/console.js"></script>
<div class="control-group field_wrapper">
  <label class="control-label"><strong> Inventory Number 1</strong></label>
  <div class="controls">
    <div class="input-prepend">
      <input type="text" class="input-medium" name="inventory_number[]" id="inventory_number[]">
      <button class="btn btn-success add-number" type="button" title="Add MAC Address"><i class="icon-plus"></i> </button>
    </div>
  </div>
</div>
<div class="additionalNumber"></div>

JavaScript

var maxField = 10; 
var addButton = $('.add-number'); 
var wrapper = $('.additionalNumber'); 
var fieldHTML = '<div class="control-group field_wrapper"><label class="control-label"><strong> Inventory Number x</strong></label><div class="controls"><div class="input-prepend"><input type="text" class="input-medium"  name="inventory_number[]" id="inventory_number[]"><button class="btn btn-danger remove" type="button"><i class="icon-remove"></i> </button></div></div></div>';
var x = 1;
$(addButton).on('click', function(e) {
  if (x < maxField) {
    x++;
    $(wrapper).append(fieldHTML);
  }
  if (x >= maxField) {
    alert('Limited to 10.');
  }
});
$(wrapper).on('click', '.remove', function(e) {
  e.preventDefault();
  $(this).parents('.control-group').remove();
  x--; //Decrement field counter
});