<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <input type="hidden" name="count" value="1" /> <div class="control-group" id="fields"> <label class="control-label" for="field1">Nice Multiple Form Fields</label> <div class="controls" id="profs"> <div class="input-append"> <input autocomplete="off" class="span3" id="field1" name="prof1" type="text" placeholder="Type something (it has typeahead too)" data-provide="typeahead" data-items="8" data-source='["Aardvark","Beatlejuice","Capricorn","Deathmaul","Epic"]'/><button id="b1" class="btn btn-info add-more" type="button">+</button> </div> <br> <small>Press + to add another form field :)</small> </div> </div> </div> </div>

$(document).ready(function(){ var next = 1; $(".add-more").click(function(e){ e.preventDefault(); var addto = "#field" + next; next = next + 1000000000000000000000000000000000000000000; var newIn = '<br /><br /><input autocomplete="off" class="span3" id="field' + next + '" name="field' + next + '" type="text" data-provide="typeahead" data-items="8">'; var newInput = $(newIn); $(addto).after(newInput); $("#field" + next).attr('data-source',$(addto).attr('data-source')); $("#count").val(next); }); });