no se aplica jqueryUI

[danielnv18]

tengo este codigo de jquery ui

Código Javascript:

$(function() {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        $( ".cristaleria" ).autocomplete({
            source: availableTags
        });
    });
 

no con los mismos valores pero es el mismo. este jquery se aplica a este html

Código HTML:

<div id="" class="fila">
        <div id="celda"><input type="text" id="cristaleria1" class="cristaleria" name="cristaleria1" onkeyup="capacidad(this.id)"></div>
        <div id="celda"><div id="capacidad1">-</div></div>
        <div id="celda"><div id="material1" >-</div></div>
        <div id="celda"><input type="text" id="entrada1" name="entrada1" value=""></div>
        <div id="check"><input type="button" id="btn1" value="" onclick="agregar(this.id)"></div>
    </div>
<div id="campos"></div>
 

cuando apreto ese boton lo que hace es inhabilitar un campo y agregar otro con esta funcion

Código Javascript:

var nextinput = 1;
function agregar(str) {
    if(nextinput<10){
        num=str.substring(str.length-1, str.length);
    }else{
        num=str.substring(str.length-2, str.length);
    }
        
    var cris ="cristaleria"+num;
    var capa ="capacidad"+num;
    var mat ="material"+num;
    var en = "entrada"+num;
    alert (document.getElementById(cris).value);
    document.getElementById(str).disabled=true;
    document.getElementById(cris).disabled=true;
    document.getElementById(capa).disabled=true;
    document.getElementById(mat).disabled=true;
    document.getElementById(en).disabled=true;
    
    
    nextinput++;
    alert (nextinput);
    campo = '<div id="" class="fila">';
    campo = campo+'<div id="celda"><input type="text" id="cristaleria'+nextinput+'" class="cristaleria" name="cristaleria'+nextinput+'1" onkeyup="capacidad(this.id)"></div>';
    campo = campo+'<div id="celda"><div id="capacidad'+nextinput+'">-</div></div>';
    campo = campo+'<div id="celda"><div id="material'+nextinput+'" >-</div></div>';
    campo = campo+'<div id="celda"><input type="text" id="entrada'+nextinput+'" name="entrada'+nextinput+'" value=""></div>';
    campo = campo+'<div id="check"><input type="button" id="btn'+nextinput+'" value="" onclick="agregar(this.id)"></div>';
    $("#campos").append(campo); 
        
}
 

el problema es q a los nuevos campos no se aplica el codigo jquery de auto completado y de ahí lo demás funciona

mi pregunta es como resuelvo esto para q se aplica el auto complete a esa clase o si hay otra manera de hacerlo?