If you are looking to add and remove duplicate more input fields, here is the jQuery example below to do the task for you. This jQuery snippet adds duplicate input fields dynamically and stops when it reaches maximum.
CSS Code:
.wrapper
{
text-align: center;
width: 800px;
margin: auto;
}
input[type="text"]{
height: 35px;
margin-bottom:5px;
width: 300px;
padding: 10px;
}
.btn{
padding: 10px 20px;
border: none;
}
.btn-primary{
background: #036d03;
color: #fff;
font-weight: bold;
}
.btn-default{
background: #f95e00;
color: #fff;
font-weight: bold;
}
HTML Code:
<div class="wrapper">
<div id="TextBoxesGroup">
<div class="row" id="row1">
<div>
<input type="text" required="" placeholder="input 1" name="pro1" class="form-control" >
</div>
</div>
</div>
</div>
<div style="margin:auto;text-align:center">
<div style="margin-top: 20px;">
<input type='button' value='Add More TextBox' id='addbtntext' class="btn btn-primary" >
<input type='button' value='Remove TextBox' id='removeButton' class="btn btn-default" >
</div>
</div>
JQuery Code:
// Add below jquery plugin in script tag
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" ></script>
$(document).ready(function () {
var counter = 2;
var countergeneral = 2;
$("#addbtntext").click(function () {
if (counter > 10) {
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("class", 'row')
.attr("id", 'row' + counter)
newTextBoxDiv.html("<div><input type='text' placeholder='Input " + counter + "' name='pro' ></div>");
//newTextBoxDiv.after().html('heelo');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if (counter == 2) {
alert("No more textbox to remove");
return false;
}
counter--;
$("#row" + counter).remove();
});
});