"Adding Dynamic Form Fields – Add & Remove with new ID in Bootstrap"
Bootstrap 3.1.0 Snippet by amitchaudharyj

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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">Add Dynamic Fields With New ID</label> <div class="controls" id="profs"> <form class="input-append"> <div id="field"> <input autocomplete="off" class="input form-control" id="field1" name="prof1" type="text" data-items="8"/> <button id="b1" class="btn btn-success add-more" type="button">+</button> </div> </form> </div> </div> </div> </div>
#field { margin-bottom:20px; } input { font-size: 14px; } .input-append input{ height:34px } .input-append input[class*="span"], .input-append .uneditable-input[class*="span"], { display: inline-block; } .control-group.warning .input-append .add-on { color: #c09853; background-color: #fcf8e3; border-color: #c09853; } .control-group.error .input-append .add-on { color: #b94a48; background-color: #f2dede; border-color: #b94a48; } .control-group.success .input-append .add-on { color: #468847; background-color: #dff0d8; border-color: #468847; } .control-group.info .input-append .add-on { color: #3a87ad; background-color: #d9edf7; border-color: #3a87ad; } .input-append{ display: inline-block; margin-bottom: 10px; vertical-align: middle; font-size: 0; white-space: nowrap; } .input-append input, .input-append select, .input-append .uneditable-input, .input-append .dropdown-menu, .input-append .popover, { font-size: 14px; } .input-append input, .input-append select, .input-append .uneditable-input, { position: relative; margin-bottom: 0; *margin-left: 0; vertical-align: top; -webkit-border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; } .input-append input:focus, .input-append select:focus, .input-append .uneditable-input:focus, { z-index: 2; } .input-append .add-on { display: inline-block; width: auto; height: 20px; min-width: 16px; padding: 4px 5px; font-size: 14px; font-weight: normal; line-height: 20px; text-align: center; text-shadow: 0 1px 0 #ffffff; background-color: #eeeeee; border: 1px solid #ccc; } .input-append .add-on, .input-append .btn, .input-append .btn-group>.dropdown-toggle { vertical-align: top; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .input-append .active { background-color: #a9dba9; border-color: #46a546; } .input-append input, .input-append select, .input-append .uneditable-input { -webkit-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; } .input-append input+.btn-group .btn:last-child, .input-append select+.btn-group .btn:last-child, .input-append .uneditable-input+.btn-group .btn:last-child { -webkit-border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; } .input-append .add-on, .input-append .btn, .input-append .btn-group { margin-left: -1px; } .input-append .btn, .input-append .add-on:last-child, .input-append .btn:last-child, .input-append .btn-group:last-child>.dropdown-toggle { -webkit-border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; } .form-search .input-append .search-query, .form-search .input-prepend .search-query { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .form-search .input-append .search-query { -webkit-border-radius: 14px 0 0 14px; -moz-border-radius: 14px 0 0 14px; border-radius: 14px 0 0 14px; } .form-search .input-append .btn { -webkit-border-radius: 0 14px 14px 0; -moz-border-radius: 0 14px 14px 0; border-radius: 0 14px 14px 0; } .form-search .input-append, .form-inline .input-append, .form-horizontal .input-append { display: inline-block; *display: inline; *zoom: 1; margin-bottom: 0; vertical-align: middle; } .form-search .input-append, .form-inline .input-append{ margin-bottom: 0; } .form-horizontal .input-append+.help-block { margin-top: 10px; } .navbar .input-append .btn, .navbar .input-append .btn-group { margin-top: 0; } .navbar-form .input-append{ margin-top: 5px; white-space: nowrap; } .navbar-form .input-append input { margin-top: 0; } .input-append input, .input-append input[class*="span"] { display: inline-block; width: auto; }
$(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 = '<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(); }); }); });

Related: See More


Questions / Comments: