First of all, sorry for the crap title....I wasn't sure how to sum up the problem in a few words...

..Basically I have a script which dynamically creates table rows on a button click. When each row is created the tr tag is assigned an id. In one of the td's of each row is a delete href which calls a function to remove the row (passing in the relevant id).

Now the problem is that this id is created and set when the tr is created i.e. the id is the current max row_number. The trouble is that when i create the next tr the max row number increases and all the previous id's in the href link are now set to the maximum row number.

Does anyone know how do i solve this?
It's almost as if you need to make the link static, or the id static so that it won't be changed if the variable it is derived from changes.

I'll post my code below

Code:
 <script type="text/javascript">
var counter=0;
var hours=0;
var theID=0;
function mod_fields(oForm,del,pos) 
{
	 /* alert('get here?'+oForm[0].value);
	    alert('get here?'+oForm[1].value);*/
	 if (typeof mod_fields.n == 'undefined') mod_fields.n = 0;
     if (del) 
	 {
		 alert('pos is' +pos+' mod flds is '+mod_fields.n);
		var t = document.getElementById('duration'+pos);//+mod_fields.n);
		var d = document.getElementById('tr'+pos);
		d.parentNode.removeChild(d);
		counter--; 
		//alert('length '+t.length +' value is '+t.value);
		    hr = t.value-t.value-t.value;
		//	alert('hr is '+hr);
			replace_hours(hr);
			t.parentNode.removeChild(t);
            --mod_fields.n;
			--pos;
		var p = document.getElementById('project'+pos);//+mod_fields.n);
		p.parentNode.removeChild(p);
            --mod_fields.n;
		 return false;
	 }
     else
	 {
		 var hrs = (oForm[1].value)*30/60;
		 var new_el = document.createElement('input');
		 new_el.setAttribute('type', 'text');
		 new_el.setAttribute('name', 'project' + (mod_fields.n + 1));
		 new_el.setAttribute('id', 'project' + (mod_fields.n + 1));
		 new_el.setAttribute('value', oForm[0].value);
		 oForm.appendChild(new_el);
		 ++mod_fields.n;
		 var new_elm = document.createElement('input');
		 new_elm.setAttribute('type', 'text');
		 new_elm.setAttribute('name', 'duration' + (mod_fields.n + 1));
		 new_elm.setAttribute('id', 'duration' + (mod_fields.n + 1));
		 new_elm.setAttribute('value', hrs);
		 oForm.appendChild(new_elm);
		 ++mod_fields.n;
     
	 	var theTable = document.getElementById('proj_table');
		var theRow = document.createElement('tr');
		theRow.setAttribute('id', 'tr'+mod_fields.n);
		theTable.tBodies[0].appendChild(theRow);//document.createElement('tr'));
		var y = document.createElement('td');
		y.setAttribute('align', 'center');
		var x = document.createElement('td');
		x.setAttribute('align', 'center');
		var empt = document.createElement('td');
		y.appendChild(document.createTextNode(oForm[0].value));
		x.appendChild(document.createTextNode(hrs));
		var link = document.createElement('a');
		theID = mod_fields.n;
/* This is where the id is set, but all the links end up representing whatever the value of mod_fields.n is.*/

		link.setAttribute('href', 'javascript:void(mod_fields(this.form, true, theID))');
/* Is there anyway that i can set this link with an id that doesn't change, i.e. a static id or link or something??*/
		link.className='loginLink';
		link_text = document.createTextNode('[Delete]');
		link.appendChild(link_text);
		//link.onclick = function () {this.parentNode.parentNode.removeChild(this); counter--; };
		empt.appendChild(link);
		theTable.tBodies[0].rows[counter].appendChild(y);
		theTable.tBodies[0].rows[counter].appendChild(x);
		theTable.tBodies[0].rows[counter].appendChild(empt);
		//theTable.tBodies[0].rows[counter].onclick = function () { /*bar a = 'project'+mod_fields.n; var b = document.getElementById(a);alert('length is '+this.parentNode.childNodes[0].childNodes[1].nodeValue);  this.parentNode.removeChild(this); counter--; };
		counter++;	
		replace_hours(hrs);
		//alert('does it delete after this?');
		//theTable.tBodies[0].deleteRow[this];
	 }
}

function replace_hours(hrs)
{
	hours+=hrs;
	var span = document.createElement("span");
	span.setAttribute( 'id', 'span_tot' );
    var newText = document.createTextNode(hours+' hours');
    span.appendChild(newText);

    var para = document.getElementById("total");
    var spanElm = document.getElementById("span_tot");
    var replaced = para.replaceChild(span,spanElm);
}


</script>
Hope someone can help.......thanks!