<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DEMO Add and Remove TextBox</title>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(document).ready(function() {
var i=$("#fields p").size()+1;
$('.btadd').click(function() {
alert(i);
var box = '<p><label>NAME :</label><input type="text" name="txt"><input type="button" class="btRemove" value="Remove"><br></p>';
$('#fields').append(box); // end append
//start create box
$('p .btRemove').last().click(function() {
$(this).parent().last().remove();
}); // end click
i++;
}); // end click
//Get value
$("#btok").click(function() {
alert($('#form1').serialize());
});
}); // end ready
</script>
</head>
<body>
<form id="form1">
<div id="fields">
<p><label>NAME :</label><input type="text" name="txt"> <input type="button" class="btadd" value="Add"></p>
</div>
</form>
<input type="button" id="btok" name="submit" value="GET Values"/>
</body>
</html>