<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-2 col-md-2 col-sm-2 col-xs-12"></div>
	<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
	   <div class="main_border">
		<div class="main_header_bg">jQuery Add and Remove (Bottom to Remove)</div>
		<div class="container-fluid" style="padding:10px !important;">
			<div class="input_fields_wrap">
			<div class="form-group row">
				<div class="col-md-5 col-sm-4 col-xs-12">
					<label>Name</label>
					<input type="text" class="form-control my_form" name="sample_name[]" placeholder="Name">
				</div>
				<div class="col-md-2 col-sm-2 col-xs-12">
					<label>Age</label>
					<input type="text" class="form-control my_form" name="sample_age[]" placeholder="Age">
				</div>
				<div class="col-md-4 col-sm-4 col-xs-10">
					<label>Languages</label>
					<select class="form-control my_form"  name="sample_lang[]" value="">
						<option value="">Select Language</option>
						<option value="English">English</option>
						<option value="Hindi">Hindi</option>
						<option value="Telugu">Telugu</option>
						<option value="Tamil">Tamil</option>
						<option value="German">German</option>
					</select>
				</div>
				<div class="col-md-1 col-sm-2 col-xs-2"><button class="add_field_button btn-success add_btn">+</button></div>
			</div>
			
		  </div>
		</div>
	  </div>
	</div>
	<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>

</form>
</div>
.main_header_bg {
    background-color: #036;
    padding: 10px 15px;
    font-size: 14px;
    color: #FFF;
    border: 1px solid #036;
    font-weight: bold;
    margin: 0px;
    border-radius: 3px;
}

.main_border {
    border: 1px solid #036;
    border-radius: 3px;
    margin-top: 50px;
}

.border_fff {
    border-bottom: 2px solid #FFF;
}

label {
    font-weight: 600;
    margin: 20px auto -5px;
    font-size: 13px;
}

.cus_label {
    font-weight: 600;
    margin-top: 10px;
}

.my_form {
    border-radius: 0px !important;
    padding: 1px 15px !important;
    margin: 10px auto;
}

.add_btn {
    border-radius: 100px;
    font-weight: bold;
    font-size: 20px;
    padding: 0px 9px;
    border: none;
    margin: 45px 0px 0px;
}

.remove_btn {
    border-radius: 100px;
    font-weight: bold;
    font-size: 20px;
    padding: 4px 12px;
    margin: 2px 5px;
}
<script type="text/javascript"> 
	$(document).ready(function() {
	var max_fields      = 7; //maximum input boxes allowed
	var wrapper         = $(".input_fields_wrap"); //Fields wrapper
	var add_button      = $(".add_field_button"); //Add button ID
	
	var x = 1; //initlal text box count
	$(add_button).click(function(e){ //on add input button click
		e.preventDefault();
		if(x < max_fields){ //max input box allowed
			x++; //text box increment
			$(wrapper).append('<div class="form-group row"><div class="col-md-5 col-sm-4 col-xs-12"><label>Name</label><input type="text" class="form-control my_form" name="sample_name[]" placeholder="Name"></div><div class="col-md-2 col-sm-2 col-xs-12"><label>Age</label><input type="text" class="form-control my_form" name="sample_age[]" placeholder="Age"></div><div class="col-md-4 col-sm-4 col-xs-10"><label>Languages</label><select class="form-control my_form"  name="sample_lang[]" value=""><option value="">Select Language</option><option value="English">English</option><option value="Hindi">Hindi</option><option value="Telugu">Telugu</option><option value="Tamil">Tamil</option><option value="German">German</option></select></div><a href="#" class="remove_field"><span class="remove_btn btn-danger" style="margin:42px 15px; position:absolute; padding:0px 11px;">-</span> </a></div>'); //add input box
		}
	});
	$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
		e.preventDefault(); $(this).parent('div').remove(); x--;
	});
});
</script>

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.