<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();
});
});
});
