Buscador

[Sidus]

Hola amigos no se si sea este el foro indicado, estoy teniendo un problemilla espero y me puedan dar sus aportes. resulta que estoy clonando inputs con jquery pero a su ves dentro de estos inputs tengo un buscador con ajax, hasta aca todo me va bien mi problema es que cuando agrego un segundo input no me funciona mi buscador les dejo mi codigo.

basicamente esto es lo que estoy clonando, en el div opciones muestro los resultados de la busqueda.

Código HTML:

<tr>
            <td>
              <div id="opciones"></div><input name="nombre[]" placeholder="Escribe el destinatario" size="50px" class="criterio" id="criterio" onkeyup="javascript:autocompletar()"/>
             </td>
            <td colspan="6">
                <select name="ccp[]">
                    <option value="0">Selecciona una opcion</option>
                    <option value="Para expediente personal">Para expediente personal</option>
                </select>
            </td>
            <td>
                <button type="button" class="btn remove_button">-</button>
            </td>
        </tr>
 

buscador.js

Código Javascript:

function autocompletar(){
    criterio = document.getElementById('criterio').value;
    url = "../directivos/busca_user.php?criterio="+criterio;
    
    completar.open("GET", url, true);
    completar.onreadystatechange=function(){
        if(completar.readyState==4){
                respuesta = completar.responseText;
                opciones = document.getElementById('opciones');
                
                //hacer visible el div opciones y cargar el contenido de respuesta de autocompletar.php
                opciones.style.display='block';
                opciones.innerHTML = respuesta;
                //para que el div opciones no se muestre si no hay texto en criterio
                if(criterio==''){
                    opciones.style.display = 'none';
                }
        }
    }
    completar.send(null);
}
 
 
function reemplazar_criterio(texto){
    document.getElementById('criterio').value=texto;
    document.getElementById('opciones').style.display='none';
}
 

busca_user.php

Código PHP:

if(isset($_GET["criterio"]) && $_GET["criterio"]!=""){
    
    $criterio = $_GET["criterio"];
    
    $sql = "select Encargado_area_dpto,Cargo_area_dpto from area_dpto where Encargado_area_dpto like '%".$criterio."%'";
    
    $query = mysql_query($sql, $conex);
    
    while($opcion=mysql_fetch_object($query)){
        $url = "javascript:reemplazar_criterio('".$opcion->Encargado_area_dpto." | ".$opcion->Cargo_area_dpto."')";
        echo '<a href="'.$url.'">'.$opcion->Encargado_area_dpto.'. .'.$opcion->Cargo_area_dpto.'</a>';
    }
    
}
 

Gracias por sus aportes