<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="container-fluid">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 col-lg-offset-2 col-md-offset-2">
   <div class="main_border">
	<div class="main_header_bg">jQuery Add and Remove (Top to Remove)</div>
	<div class="panel-body">

		<div id="my_fields">
				  
		</div>
		<div class="col-md-6 col-sm-6 col-xs-12 nopadding">
		  <div class="form-group">
			<input type="text" name="f_name" placeholder="First Name" class="form-control my_form">
		  </div>
		</div>
		<div class="col-md-6 col-sm-6 col-xs-12 nopadding">
		  <div class="form-group">
			<div class="input-group">
			  <input type="text" name="l_name" placeholder="Last Name" class="form-control my_form">
			  <div class="input-group-btn">
				<button class="btn btn-success add_btn" type="button"  onclick="my_fields();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
			  </div>
			</div>
		  </div>
		</div>
		<div class="clear"></div>	  
	</div>
	</div>
</div>
</div>

.main_header_bg{ 
	background-color:#F90; 
	padding:10px 15px; 
	font-size:14px; 
	color:#FFF; 
	border:1px solid #F90; 
	font-weight:bold; 
	margin:0px; 
	border-radius:3px;
	} 
.main_border{
	border:1px solid #F90; 
	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{ 
	font-weight:bold; 
	font-size:20px; 
	padding:7px 12px; 
	border:none; 
	margin:10px 5px 0px;
	} 
.remove_btn{ 
	font-weight:bold; 
	font-size:20px; 
	padding:6px 12px; 
	margin:10px 5px 0px;
	} 
.panel-body {
	padding:50px 15px;
	}

var room = 1;
function my_fields() {
    room++;
    var objTo = document.getElementById('my_fields')
    var divtest = document.createElement("div");
	divtest.setAttribute("class", "form-group removeclass"+room);
	var rdiv = 'removeclass'+room;
    divtest.innerHTML = '<div class="col-md-6 col-sm-6 col-xs-12 nopadding"><div class="form-group"><input type="text" name="f_name" placeholder="First Name" class="form-control my_form"></div></div><div class="col-md-6 col-sm-6 col-xs-12 nopadding"><div class="form-group"><div class="input-group"><input type="text" name="l_name" placeholder="Last Name" class="form-control my_form"><div class="input-group-btn"> <button class="btn btn-danger remove_btn" type="button" onclick="remove_my_fields('+ room +');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div><div class="clear"></div>';
    
objTo.appendChild(divtest)
}
function remove_my_fields(rid) {
  $('.removeclass'+rid).remove();
}