Динамически созданные входы с Javascript Не показывать выпадающий список

Question

Я создаю часть, которая включает в себя ввод текста (который имеет раскрывающийся список с использованием базы данных), и динамически добавляю больше тех же самых входных данных. Первый вход выглядит следующим образом:

После того, как я добавлю другой вход динамически, второй вход не сможет отобразить раскрывающийся список. Это выглядит так:

У меня не было образования js / ajax, поэтому я пытался редактировать части кода js, которые Я нашел по inte rnet, используя мои знания java.

Часть html первой строки выглядит следующим образом:

<tr class="no-border" id="articles">
    <td class="text-center" style="padding: 7px;padding-right: 0;padding-left: 0;">
        <i class="fas fa-plus" name="add" id="add"></i>
    </td>
    <td style="padding: 5px;">
        <div class="dropdown">
            <input type="text" class="form-control form-control-sm" name="product1" id="product1" autocomplete="off" required form="purchaseForm" />
        </div>
    </td>
    <td style="padding: 5px; max-width: 40px;">
        <input type="number" class="form-control form-control-sm" step="0.001" required />
    </td>
    <td style="padding: 5px; max-width: 40px;">
        <input type="number" class="form-control form-control-sm" step="0.001" required />
    </td>
</tr>

Часть javascript для создания Новая строка и раскрывающийся список создания выглядят следующим образом:

var i=1;
$('#add').click(function(){
    i++;
    $('#dynamic_field').append('<tr class="no-border" id="row'+i+'"><td class="text-center" style="padding: 7px;padding-right: 0;padding-left: 0;"><button class="btn btn_remove" name="remove" id="'+i+'" type="button" style="padding: 0;"><i class="fas fa-minus"></i></button></td><td style="padding: 5px;"><div class="dropdown"><input type="text" class="form-control form-control-sm" name="product'+i+'" id="product'+i+'" autocomplete="off" required form="purchaseForm" /></div></td><td style="padding: 5px; max-width: 40px;"><input type="number" class="form-control form-control-sm" step="0.001" required /></td><td style="padding: 5px; max-width: 40px;"><input type="number" class="form-control form-control-sm" step="0.001" required /></td></tr>');
});

$(document).on('click', '.btn_remove', function(){
    var button_id = $(this).attr("id"); 
    $('#row'+button_id+'').remove();
});

for(j = 1; j < (i + 1); j++){
    $('#product'+j).typeahead({
        source: function (query, result) {
            $.ajax({
                url: "searchProducts.php",
                data: 'query=' + query,            
                dataType: "json",
                type: "POST",
                success: function (data) {
                    result($.map(data, function (item) {
                        return item;
                    }));
                }
            });
        }
    });
}

И да, динамически созданные входные данные называются product2, product3 и т. д. С td и div идентичны исходным. Ну, я уверен, что проблема является результатом моего незнания javascript рабочих принципалов. Любая помощь будет оценена. Спасибо всем.

Answer 1

Решение так же просто, как Муджибур, упомянутый в комментарии. Вызов функции для создания выпадающего списка в $ ('# add'). Click (function () {, сразу после создания строки решил ее:

Я изменил первый вызов только для ввода product1 вместо пытаясь l oop в a для l oop, и копировал функцию для каждого динамически создаваемого продукта, так как я не знаю, как создавать функции и вызывать их.

$('#product1').typeahead({
    source: function (query, result) {
        $.ajax({
            url: "searchProducts.php",
            data: 'query=' + query,            
            dataType: "json",
            type: "POST",
            success: function (data) {
                result($.map(data, function (item) {
                    return item;
                }));
            }
        });
    }
});

var i=1;
$('#add').click(function(){
    i++;
    $('#dynamic_field').append('<tr class="no-border" id="row'+i+'"><td class="text-center" style="padding: 7px;padding-right: 0;padding-left: 0;"><button class="btn btn_remove" name="remove" id="'+i+'" type="button" style="padding: 0;"><i class="fas fa-minus"></i></button></td><td style="padding: 5px;"><div class="dropdown"><input type="text" class="form-control form-control-sm" name="product'+i+'" id="product'+i+'" autocomplete="off" required form="purchaseForm" /></div></td><td style="padding: 5px; max-width: 40px;"><input type="number" class="form-control form-control-sm" step="0.001" required /></td><td style="padding: 5px; max-width: 40px;"><input type="number" class="form-control form-control-sm" step="0.001" required /></td></tr>');
    $('#product'+i).typeahead({
    source: function (query, result) {
        $.ajax({
            url: "searchProducts.php",
            data: 'query=' + query,            
            dataType: "json",
            type: "POST",
            success: function (data) {
                result($.map(data, function (item) {
                    return item;
                }));
            }
        });
    }
});
});