<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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"> <form class="input-append"> <div id="field"> <div class="col-sm-3"> <select class="input form-control pdi-spacing-02" id="field1" name="prof1"> <option>Please Select...</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> </select> </div> <button id="b1" class="btn add-more" type="button">+</button> </div> </form> <br> <small>Press + to add another form field :)</small> </div> </div> </div> </div>

* { .border-radius(0) !important; } #field { margin-bottom:20px; }

$(document).ready(function(){ var next = 1; $(".add-more").click(function(e){ e.preventDefault(); var addto = "#field" + next; var addRemove = "#field" + (next); next = next + 1; var newIn = '<select class="input form-control pdi-spacing-02" id="field1" name="prof1">' var newIn = '<select autocomplete="off" class="input form-control" id="field' + next + '" name="field' + next + '" type="text"><option>Please Select...</option><option>Option 1</option><option>Option 2</option><option>Option 3</option><option>Option 4</option></select>'; // var newIn = '<input autocomplete="off" class="input form-control" id="field' + next + '" name="field' + next + '" type="text">'; var newInput = $(newIn); var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me" >-</button></div><div id="field">'; var removeButton = $(removeBtn); $(addto).after(newInput); $(addRemove).after(removeButton); $("#field" + next).attr('data-source',$(addto).attr('data-source')); $("#count").val(next); $('.remove-me').click(function(e){ e.preventDefault(); var fieldNum = this.id.charAt(this.id.length-1); var fieldID = "#field" + fieldNum; $(this).remove(); $(fieldID).remove(); }); }); });