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