Dear All,
I have a code as below. Each time I press the add button it will create a new row. What I notice is that if I comment this line prot.attr("class", "") it does not work why must I make the class empty then only it works. Secondly when I add a new row it copies the data from the first row always. So I added this line prot.find("#col4").attr("value", ""); but it does not work either too. Any help please.

HTML Code:
		<script src=""></script>
		$(document).ready(function() {
			var id = 0;
			// Add button functionality
			$("table.dynatable button.add").click(function() {
				var master = $(this).parents("table.dynatable");
				// Get a new row based on the prototype row
				var prot = master.find(".prototype").clone();
				prot.attr("class", "")
				prot.find(".id").attr("value", id);
				//prot.find("#col4").attr("value", "");				
			// Remove button functionality
			$("table.dynatable button.remove").live("click", function() {
			.dynatable {
				border: solid 1px #000; 
				border-collapse: collapse;
			.dynatable th,
			.dynatable td {
			.dynatable .prototype {
		<form action="<?=$_SERVER['PHP_SELF']?>" method="post" name="form1" enctype="multipart/form-data" id=form1 >
		<table class="dynatable">
					<th>Col 3</th>
					<th>Col 4</th>
					<th><button class="add">Add</button></th>
				<tr class="prototype">
					<td><input type="text" name="id[]" value="0" class="id" /></td>
					<td><input type="text" name="name[]" value="" /></td>
					<td><input type="text" name="years" value="" /></td>
					<td><input type="text" name="col4[]" value="" /></td>
					<td><button class="remove">Remove</button>
		<input class="buttons" type="Submit" name="Submit" value="Submit">