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" for="MacAddress"><strong> Inventory No. &amp; MAC</strong></label>
  <div class="controls">
    <div class="input-prepend">
      <span class="add-on"><a href="/help.php?id=inventory_number&amp;height=400&amp;width=800" rel="tooltip" class="thickbox" title="What is an Inventory Number?"><i class="icon-question-sign"></i></a></span><input type="text" class="input-medium span-12"
        placeholder="Inventory Number" name="inventory_number[]" id="inventory_number" required="" maxlength="6" autocomplete="off"><span class="add-on"><a href="/help.php?id=mac_address&amp;height=800&amp;width=800" rel="tooltip" class="thickbox" title="What is a MAC?"><i class="icon-question-sign"></i></a></span>


    </div>
  </div>
</div>

<div class="additionalMac"></div>

JavaScript

var maxField = 10; //Input fields increment limitation
var addButton = $('.add-mac'); //Add button selector
var wrapper = $('.additionalMac'); //Input field wrapper
var fieldHTML = '<div class="control-group field_wrapper"><label class="control-label" for="MacAddress"><strong> Inventory No. & MAC</strong></label><div class="controls"><div class="input-prepend"><span class="add-on"></span><input type="text" class="input-medium span-12 addedInv" placeholder="Inventory Number" name="inventory_number[]" id="inventory_number"><input type="text" class="input-large required MACChecker addedMac" placeholder="MAC Address" id="mac_address" onchange="fixMacAddress()" name="MacAddress[]" autocomplete="off" required><button class="btn btn-danger remove-mac" type="button" title="Remove MAC Address"><i class="icon-remove"></i> </button></div></div></div>';
var x = 1; //Initial field counter is 1
//Once add button is clicked
$(addButton).on('click', function(e) {
  //Check maximum number of input fields
  if (x < maxField) {
    x++; //Increment field counter
    $(wrapper).append(fieldHTML); //Add field html
  }
  if (x >= maxField) {
    alert('Limited to 10 MAC Addresses per application.');
  }
});
//Once remove button is clicked
$(wrapper).on('click', '.remove-mac', function(e) {
  e.preventDefault();
  $(this).parents('.control-group').remove(); //Remove field html
  x--; //Decrement field counter
});