ошибка при работе с jQuery autoComplete
 

имеется таблица с инпут-полями(вернее одно поле сзодано по умолчанию) и кнопка которая добавляет доп инпут-поля. первое инпут-поле с классом "product_name_0" - для него все отлично работает. после добавления второго и тд при вводе в инпут ничего не выводит. ошибок никаких в консоли нет. подскажите кто сталкивался с такой проблемой как решили?
jQuery подключено, jQueryUI тоже подключено

$(document).ready(function () {
 
var totalRows = 0;
 
$('body').on('click', '.add-new-product', function(e){
        totalRows++;
    var a = totalRows;
    $("tbody").append("<tr><td><input type='text' class='product_name_"+a+"' ></td></tr>");
    //$(".product_name_" + a).autoComplete();
});
 
var a = totalRows;
 
$(".product_name_"+a).autocomplete({
    source: 'search.php',
    minLength: 2
});
 
});

если же написать код немного по-другому, то в консоле ошибка - Uncaught TypeError: $(...).autoComplete is not a function. и даже для первого инпута не работает автокомплит. гугл-поиск результатов не дал.

$(document).ready(function () {
var totalRows = 0;
 
$('body').on('click', '.add-new-product', function(e){
        totalRows++;
    var a = totalRows;
    $("tbody").append("<tr><td><input type='text' class='product_name_"+a+"' ></td></tr>");
    $(".product_name_" + a).autoComplete();
});
 
$(".product_name").autocomplete({
        source: 'search.php',
        minLength: 2
});
 
});