Rellenar inputs de una fila al ingresar codigo

[bkquiceno]

Buenas tardes soy un poco nuevo en esto del ajax, pero necesito un poco de ayuda, el inconveniente que tengo es el siguiente: tengo unas lineas de codigo que me buscan informacion en la bd al ingresar un codigo en un input, y me pone los resultados en los input que deseo, pero al agregar una fila nueva dinamicamente, el id de los input sigue siendo el mismo "referencia" y por consiguiente me dijeron que tenia que colocar un contador al id pero no se como ya que el aumento de la fila esta con un codigo en javascript. les voy a poner los codigos del aumento de filas para ver si me pueden ayudar a colocarle el id con el contador al input, muchas gracias de antemano..

prueba.php
<?php
include('conexion.php');
$v=$_POST["codigo_barra"];
$resultado=mysql_query("SELECT referencia, nombre, iva FROM producto WHERE codigo_barras='$v'");
$registro=mysql_fetch_row($resultado);
$xml="<?xml version='1.0' encoding='ISO-8859-1'?>";
$xml.="<datos>";
$xml.="<referencia><![CDATA[$registro[0]]]></referencia>";
$xml.="<nombre><![CDATA[$registro[1]]]></nombre>";
$xml.="</datos>";
header("Content-type: text/xml");
echo $xml;
?>

archivos java que reciben y asignan la respuesta a campos

function nuevoAjax()
{
var xmlhttp=false;
try
{
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(E) { xmlhttp=false; }
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp=new XMLHttpRequest(); }
return xmlhttp;
}

function traerDatos()
{var cod=document.getElementById("codigo_barra").value;
var campo1=document.getElementById("referencia");
var campo2=document.getElementById("descripcion");

var ajax=nuevoAjax();
ajax.open("POST", "prueba.php", true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send("codigo_barra="+cod);

ajax.onreadystatechange=function()
{
if (ajax.readyState==4)
{
var respuesta=ajax.responseXML;
campo1.value=respuesta.getElementsByTagName("refer encia")[0].childNodes[0].data;
campo2.value=respuesta.getElementsByTagName("nombr e")[0].childNodes[0].data;
}
}
}

la funcion que me crea filas apartir de una fila hecha en html

function activaTeclasDetalleCompra()//entrada de compras
{
var oEvent = arguments[0] || window.event;
var tecla = oEvent.keyCode;
var trActual = null;
if (this.name == "pventa[]") {
if (tecla == 9) {//9 Codigo numerico de Tecla Tabuladora (tab)
trActual = this.parentNode.parentNode;
var nuevoTr = trActual.cloneNode(true);
//Vaciamos la informacion que se pasa por defecto al clonar el tr
var nuevosInput = nuevoTr.getElementsByTagName('input');
for (var i = 0; i < nuevosInput.length; i++) {//aqui crea la fila copiada con todo en blanco pienso que aqui deberia estar el contador con el id para cada input referencia y descripcion
nuevosInput[i].value = "";
}
//ingresar ahora la funcionalidad a las teclas
nuevosInput[3].onkeyup = activaTeclasDetalleCompra;
nuevosInput[4].onkeyup = activaTeclasDetalleCompra;
nuevosInput[5].onkeyup = activaTeclasDetalleCompra;
nuevosInput[6].onkeyup = activaTeclasDetalleCompra;
nuevosInput[7].onkeyup = activaTeclasDetalleCompra;
//Insertamos ahora el nuevo tr creado
var bodyTabla = document.getElementById("bodyTablaDetalle");
bodyTabla.appendChild(nuevoTr); }
}

y el codigo html

<table id="tablaDetalle">

<tr>
<td><center><b>Codigo_Barras</b></center></td>
<td><center><b>Referencia</b></center></td>
<td><center><b>Descripci&oacute;n</b></center></td>
<td><center><b>P. Unitario</b></center></td>
<td><center><b>Cantidad</b></center></td>
<td><center><b>% Dcto</b></center></td>
<td><center><b>% Utilidad</b></center></td>
<td><center><b>P. Venta</b></center></td>
<td><center><b>Descuento</b></center></td>
<td><center><b>Iva</b></center></td>
<td><center><b>Subtotal</b></center></td>
</tr>

<tbody id="bodyTablaDetalle">
<tr>
<td><input style='text-align:center; border-width:0;' type="text" onchange="traerDatos ()" name="codigo_barra[]" id="codigo_barra" size="12" /></td>
<td><input style='background-color:transparent; text-align:center; border-width:0;' type="text" name="referencia[]" id="referencia" size="8" disabled="disabled"/></td>
<td><input style='text-align:center; border-width:0; background-color:transparent;' type="text" name="descripcion[]" id="descripcion" size="20" disabled="disabled"/></td>
<td><input style='text-align:center; border-width:0;' type="text" name="p_unitario[]" id="p_unitario" size="7" /></td>
<td><input style='text-align:center; border-width:0;' type="text" name="cantidad[]" id="cantidad" size="5"/></td>
<td><input style='text-align:center; border-width:0;' type="text" name="dcto[]" id="dcto" size="4"/></td>
<td><input style='text-align:center; border-width:0;' type="text" name="utilidad[]" id="dcto" size="4"/></td>
<td><input style='text-align:center; border-width:0;' type="text" name="pventa[]" id="dcto" size="4"/></td>
<td><input style='text-align:center; border-width:0; background-color:transparent;' type="text" name="descuento[]" id="descuento" disabled="disabled" size="7"/></td>
<td><input style='text-align:center; border-width:0; background-color:transparent;' type="text" name="iva[]" id="iva" size="10" disabled="disabled"/></td>
<td><input style='text-align:center; border-width:0; background-color:transparent;' type="text" name="subTotal[]" id="subtotal" disabled="disabled" size="12"/></td>
</tr>
</tbody>