<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="header_bg">Dynamic form with out fill dont show submit button.</div>
		<div class="container-fluid" style="padding:10px;">
		
			 <div class="col-sm-4 nopadding">
				<div class="form-group">
					<input type="text" class="form-control form" id="f_name" name="f_name[]" placeholder="First Name" value="" required >
				</div>
			</div>
			<div class="col-sm-4 nopadding">
				<div class="form-group">
					<input type="text" class="form-control form" id="m_name" name="m_name[]" value="" placeholder="Middle Name" required >
				</div>
			</div>

			<div class="col-sm-4 nopadding">
				<div class="form-group">
					<div class="input-group">
						<input type="text" class="form-control form" id="l_name" name="l_name[]" value="" placeholder="Last Name" required >
						<div class="input-group-btn">
							<button class="btn btn-success add_btn" type="button" id="add_name" onclick="validate_names();" > <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>

						</div>
					</div>
				</div>
			</div>
			<div id="validate_names">

			</div>
			
			
			
			<div class="clearfix" style="margin:10px auto;"></div>
			<div class="col-md-12 col-sm-12 col-xs-12">
				<input type="submit" name="submit" class="btn btn-success" value="SUBMIT">
			</div>
		
		</div>
	  </div>
	</div>
</div>

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

.main_border {
    border: 1px solid #FC0;
    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) .btn {
    border-radius: 2px;
}

{
    margin-top: 10px;
}

.glyphicon {
    font-size: 12px;
}

.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;
}
//Start Disable script
 $(document).ready(function () {
	$("#add_name").attr('disabled', 'disabled');
	$("form").keyup(function () {
		// To Disable Submit Button
		$("#add_name").attr('disabled', 'disabled');
		// Validating Fields
		var Prov = $("#f_name").val();
		var Final = $("#m_name").val();
		var Diff = $("#l_name").val();
		if (!(Prov == "" || Final == "" || Diff == "")) {
			$("#add_name").removeAttr('disabled');
		}
	});
	// On Click Of Submit Button
	$("#add_name").click(function () {
		alert("Adding Successfully..!!");
	});
});

//End  Disable script
 
 
//Start Dynamic Form script
var room = 1;
function validate_names() {
	room++;
	var objTo = document.getElementById('validate_names')
	var divtest = document.createElement("div");
	divtest.setAttribute("class", "form-group removeclass" + room);
	var rdiv = 'removeclass' + room;
	divtest.innerHTML = '<div class="col-sm-4 nopadding"> <div class="form-group"> <input type="text" class="form-control form" id="f_name' + room + '" name="f_name[]" value="" required="required" ></div></div> <div class="col-sm-4 nopadding"><div class="form-group"><input type="text" class="form-control form" id="m_name' + room + '" name="m_name[]" value="" required="required" ></div> </div><div class="col-sm-4 nopadding"> <div class="form-group"><div class="input-group"><input type="text" class="form-control form" id="l_name' + room + '" name="l_name[]" value="" required="required" ><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();
}
 //End Dynamic Form script