Add and remove textbox dynamically using coldfusion and jquery

	<style>
	.hideMe{
	display:none;
	}
	.btn-small {
	padding: 2px 10px;
	font-size: 11.9px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	}
	.btn-success {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #5bb75b;
	*background-color: #51a351;
	background-image: -moz-linear-gradient(top, #62c462, #51a351);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
	background-image: -webkit-linear-gradient(top, #62c462, #51a351);
	background-image: -o-linear-gradient(top, #62c462, #51a351);
	background-image: linear-gradient(to bottom, #62c462, #51a351);
	background-repeat: repeat-x;
	border-color: #51a351 #51a351 #387038;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
	}
	.btn-danger {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #da4f49;
	*background-color: #bd362f;
	background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
	background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
	background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
	background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
	background-repeat: repeat-x;
	border-color: #bd362f #bd362f #802420;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
	}
	</style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<cfform name="addField">
	<div align="left" style="margin-bottom:10px;" id="emailTr">
	Email<br>
	<cfloop from="1" to="3" index="i">
	<Cfoutput>
	<div id="blockEMAIL#i#" <Cfif i neq 1> class="hideMe EMAILBlock"<cfelse>class="EMAILBlock"</cfif>>
	<cfinput type="text" name="UPI_email#i#" id="UPI_email#i#" required="#i eq 1#" validate="email" message="You must enter a valid email"
	placeholder="Enter your email address" style="width:220px;" />
	<button name="removeEMAIL#i#" id="removeEMAIL#i#" style="margin-top:-10px"
	<Cfif i eq 1> class="removeEMAIL hideMe btn-danger btn-small"<cfelse>class="btn btn-danger btn-small removeEMAIL" </cfif>>
	Remove</button>
	</div>
	<div style="margin-top:7px;clear:both;"></div>
	</cfoutput>
	</cfloop>
	<button class="btn-small btn-success" name="addEMAIL" id="addEMAIL">Add More</button>
	</div>
	</cfform>
	<Script>
	$('#addEMAIL').click(function(e) {
	var divToDisplay = 4 - $('#emailTr div.hideMe').length;
	if(divToDisplay > 0 && divToDisplay < 4 )
	{
	$('#blockEMAIL'+divToDisplay).fadeIn('slow');
	$('#blockEMAIL'+divToDisplay).removeClass('hideMe');
	if(divToDisplay == 3)
	$('#addEMAIL').hide();
	}
	return false;
	});
	$('.removeEMAIL').click(function(e){
	var divPart = $(this).attr('id').slice(-1);
	$('#blockEMAIL'+divPart+' input').val('');
	$('#blockEMAIL'+divPart).fadeOut('fast');
	$('#blockEMAIL'+divPart).addClass('hideMe');
	$('#addEMAIL').show();
	return false;
	});
	</script>

view raw createtextbox.cfm hosted with ❤ by GitHub