Hi.

I'd like to have a form where the user can click am "add" button to add a new row to the form, which will include some form elements and a link to then remove the row if needed. I've been trying all afternoon to do this and can't seem to get it to work. Anyone want to have a go at this? I'll post what I have. For some reason the for row 'remove' link works and all the others do not. I'm guessing it's some kind of element reference thing. Also, why is it that the rows are getting *prepended* when i'm actually using append?

Thanks for any help.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.propertyRow{
background-color:#CCCCCC;
}
</style>
<script language="javascript" type="text/javascript">
<!--
var propertyCount = 0;
function addPropertyRow(){
	++ propertyCount;
	var row = document.getElementById('propertyRow0').cloneNode(true);
	row.id = 'propertyRow' + propertyCount;
	var a = document.getElementById('removePropertyRowLink' + (propertyCount-1));
	a.id = 'removePropertyRowLink' + propertyCount;
	a.onclick = function(){
		var num = this.id.charAt(this.id.length - 1);
		removePropertyRow(num);
	}
	document.getElementById('propertiesFS').appendChild(row);
}

function removePropertyRow(propertyRowNum){
	var row = document.getElementById('propertyRow' + propertyRowNum);
	row.parentNode.removeChild(row);
}
//-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>New Page</title>
</head>

<body>
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr valign="top">
    <td>Properties</td>
    <td>
		<button onclick="addPropertyRow(); return false;">Add</button>
		<fieldset id="propertiesFS">
			<div id="propertyRow0" class="propertyRow"><a id="removePropertyRowLink0" href="#">delete</a> - This is a property row...</div>
		</fieldset>
	</td>
  </tr>
</table>
</body>
</html>