Как сохранить идентификаторы выбранных элементов из динамически добавленных элементов управления автозаполнением ввода в соответствующих скрытых элементах управления вводом, используя JavaScript?

Question

Я впервые работаю с JS.

В моем проекте C# ASP. Net MVC я пытаюсь сохранить идентификаторы выбранных полученных предметов от «динамически добавленных Автозаполнение элементов управления вводом» к соответствующим скрытым элементам управления вводом, но я понятия не имею, как этого добиться в JS.

Метод действия:

Сценарий:

<script>
    $(document).ready(function () {
        var counter = 1;
        var table = $('#productTable').DataTable();
        var buttonAddProduct = $('#btnAddProduct');
        $(".toautocomplete").autocomplete();

        buttonAddProduct.on('click', function () {
            var txtProduct = "txtProduct" + counter;
            var txtQuantity = "txtQuantity" + counter;
            var txtUnitCost = "txtUnitCost" + counter;
            var txtSTax = "txtSTax" + counter;
            var txtLineTotal = "txtLineTotal" + counter;
            var btnAddProduct = "btnAddProduct" + counter;

            $("#productTable").append("<tr id=" + counter +
                "><td><input type='text'  id='" + txtProduct +
                "' name='Product' class='toautocomplete form-control'><input type='hidden' id='txtProductId" + counter +
                "' name='txtProductId'></td><td><input type='text' id='" + txtQuantity +
                "' name='Quantity' class='form-control'></td><td><input type='text' id='" + txtUnitCost +
                "' name='UnitCost' class='form-control'></td><td><input type='text'  id='" + txtSTax +
                "' name='STax' class='form-control' ></td><td><input type='text'  id='" + txtLineTotal +
                "' name='LineTotal' class='form-control' ></td><td><input type='button'  id='DeleteRow' class='btn btn-outline-danger' value='Remove'></td></tr>");
            counter++;
        });
    });

    //This works fine if I change the controller to pass only the value 
    $('body').on('click', '.toautocomplete', function () {
        $(this).autocomplete({
            source: '@Url.Action("GetProducts")',
            minLength: 1,
            select: function (event, ui) {
                var val = ui.item.value;
                $(event.target).val(ui.item.value);
                //something is missing here I guess...
            }
        });
    });
</script>

Просмотр:

<table id="productTable" class="table table-bordered table-hover dataTable" role="grid">
                                        <thead>
                                            <tr >
                                                <th>
                                                    Product
                                                </th>
                                                <th>
                                                    Quantity
                                                </th>
                                                <th>
                                                    Unit Cost
                                                </th>
                                                <th>
                                                    S. Tax(%)
                                                </th>
                                                <th>
                                                    Line Total
                                                </th>
                                                <th>
                                                    Action(s)
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr id="0">
                                                <td>
                                                    <input type="text" id="txtProduct" name="Products[1].Name" class="toautocomplete form-control" />
                                                    <input type="hidden" id="txtProductId" name="txtProductId">
                                                </td>
                                                <td>
                                                    <input type="text" id="txtQuantity" name="Quantity" class="form-control" />
                                                </td>
                                                <td>
                                                    <input type="text" id="txtUnitCost" name="UnitCost" class="form-control" />
                                                </td>
                                                <td>
                                                    <input type="text" id="txtSTax" name="STax" class="form-control" />
                                                </td>
                                                <td>
                                                    <input type="text" id="txtLineTotal" name="LineTotal" class="form-control" />
                                                </td>
                                                <td>
                                                    <input type="button" id="btnAddProduct" class="btn btn-primary" value="Add New" />
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>

Спасибо .