JavaScript - Add Row Clone

Hello all,

I hope someone can help me with this.

I have a form wich has a add/remove row button, this so the visitor can select multiple sets of data. All is fine and is being submitted via PHP.

Only problem is from number 10 and up, i am getting strange random numbers in the new rows that are added in their name. Like 1111 (instead of 11), 122222 (instead of 12). And because of this, every row from 10 and up won't be send through php, giving this random effect.

I can't seem to find why this is happening.

Hopefully someone can help me out in this.

The full form can be viewed

http://www.multisearch.info/test/form_ruby_2.html

The code i use for my Clone Element is

Code:

//clone element
var clone;
function cloneRow(row){
clone=row.cloneNode(true);
}

function addRowToTable(row){
var tbody=row.parentNode;
var inputs=clone.getElementsByTagName('input'), i=0, inp;
i=0;
while(inp=inputs[i++]){
	if(inp.type=='text'){
	inp.onfocus=function(){this.value='';}
	}
	if(inp.type=='button'){
	inp.value=='Add'?inp.onclick=function(){addRowToTable(this.parentNode.parentNode)}:inp.onclick=function(){removeRowFromTable(this.parentNode.parentNode)};
	}
}
tbody.appendChild(clone);
cloneRow(tbody.getElementsByTagName('tr')[tbody.getElementsByTagName('tr').length-1]);
reorderNames();
}

function removeRowFromTable(row){
row.parentNode.removeChild(row);
reorderNames();
}

function reorderNames(){
var rows=document.getElementById('tblSample').getElementsByTagName('tbody')[0].getElementsByTagName('tr'), r, i=0, el, e, j;
while(r=rows[i++]){
	el=r.getElementsByTagName('*');
	j=0;
	while(e=el[j++]){
		e.nodeName=='SELECT'||(e.nodeName=='INPUT'&&e.type=='text')?e.name=e.name.replace(/\d/,i):null;
		}
	}
}

onload=function(){
var row=document.getElementById('tblSample').getElementsByTagName('tr')[0];
cloneRow(row);
}