<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row ">
<form action="">
<div class="container-fluid">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 col-md-offset-2">
<div class="main_border">
<div class="main_header_bg">jQuery Add-and-Remove (One by One Add & Remove)</div>
<div class="container-fluid" style="padding:10px;">
<div class="col col-md-4">
<div class="fld_wrap" id="fld1">
<div class="input-group">
<input class="form-control my_form" type="text" name="" placeholder="Name">
<span class="input-group-btn"><button fldnum="1" class="btn btn-success add_btn" type="button"><span class="glyphicon glyphicon-plus"></span></button></span>
</div>
</div>
</div>
<div class="col col-md-4">
<div class="fld_wrap" id="fld2">
<div class="input-group">
<input class="form-control my_form" type="text" name="" placeholder="Designation">
<span class="input-group-btn"><button fldnum="2" class="btn btn-success add_btn" type="button"><span class="glyphicon glyphicon-plus"></span></button></span>
</div>
</div>
</div>
<div class="col col-md-4">
<div class="fld_wrap" id="fld3">
<div class="input-group">
<input class="form-control my_form" type="text" name="" placeholder="Position">
<span class="input-group-btn"><button fldnum="3" class="btn btn-success add_btn" type="button"><span class="glyphicon glyphicon-plus"></span></button></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
.main_header_bg {
background-color: #000;
padding: 10px 15px;
font-size: 14px;
color: #FFF;
border: 1px solid #000;
font-weight: bold;
margin: 0px 0px 30px;
border-radius: 3px;
}
.main_border {
border: 1px solid #000;
padding-bottom: 30px;
border-radius: 3px;
margin-top: 50px;
}
.border_fff {
border-bottom: 2px solid #FFF;
}
label {
font-weight: 600;
margin: 20px auto -5px;
font-size: 13px;
}
.input-group:not(:first-of-type) {
margin-top: 10px;
}
.glyphicon {
font-size: 12px;
}
.my_form {
border-radius: 0px !important;
padding: 1px 15px !important;
margin: 10px auto;
}
.add_btn {
font-weight: bold;
font-size: 20px;
padding: 11px 15px;
border: none;
margin: 10px 5px 0px;
}
.remove_btn {
font-weight: bold;
font-size: 20px;
padding: 10px 15px;
margin: 10px 5px 0px;
}
$(document).ready(function(){
$('.add_btn').click(function(){
var my_office=$(this).attr('fldnum');
var insHTML = '<div class="input-group"><input class="form-control my_form" type="text" name="fld_val'+my_office+'"><span class="input-group-btn"><button class="btn btn-danger remove_btn" type="button"><span class="glyphicon glyphicon-minus"></span></button></span></div>';
$("#fld"+my_office).append(insHTML);
});
$('.fld_wrap').on('click', '.remove_btn', function(e){
e.preventDefault();
$(this).parents(':eq(1)').remove();
});
});