Add another row

[rushhh]

Hi I hope this is the right place to post the question, if not please let me know where to post it.

I'm using a javascript that add another row to a table, the adding work but I'm trying figure out how to remove only 1 row at a time, right now its remove all at the same time. And is there a way I can add a remove link at each line that has been added?

<script type="text/javascript"> 
$(function(){
var current = 1; 

$('#addPerson').click(function(){
	current++;
	
	var strToAdd = '<div class="add"><table width="450px" cellpadding="0" cellspacing="0" border="0"><tr><td width="108"><label for="flavour"'+current+'">Flavour name:</label></td><td> <input id="flavour[]'+current+'" name="flavour[]'+current+'" size="0" /></td></tr>'
	strToAdd += '<tr><td><label for="size"'+current+'">Size:</label></td><td>  <input id="size'+current+'" name="size[<? $i ?>]'+current+'" size="0" /></td></tr>'
	strToAdd += '<tr><td><label for="upc'+current+'">UPC:</label></td><td><input id="upc'+current+'" name="upc[<? $i ?>]'+current+'" size="0" /></td></tr></table></div>'
	//strToAdd += ''+current+''
	
	$('.mainField').append(strToAdd);
		});
});
$(function(){
$('#remove').click(function(){
	$('.add').remove();
	//alert(current)
	//current = -1; 
	
	}); 
});
</script>

Thanks for your help...

[rushhh]

NevermindI figure it out, I change the

<div class="add">

to

<div id="add">