Как использовать Materialize - onAutocomplete - для отображения динамического c созданного содержимого, соответствующего элементу. - jquery

Question

Я пытаюсь создать Счет-фактуру, в котором ищется код продукта, где все остальные поля заполнены на его основе. Я использую материализацию каркаса для этого.

Я создаю новые строки для продуктов, но проблема, с которой я столкнулся, связана с расширением onAutocomplete.

Значение, которое я хотел бы отобразить в каждом элементе, выбирается и другими элементами.

json ответ передан в автозаполнение

    [ 
   { 
      "id":1,
      "slug":"product-name",
      "product_code":"1234",
      "product_name":"Product name",
      "product_desc":null,
      "notes":null,
      "regular_price":100,
      "discounted_price":null,
      "quantity":200,
      "tax":12,
      "product_image":"1234.2020-Jan-04.I5R.jpg",
      "deleted_at":null,
      "created_at":"2020-01-04 07:33:41",
      "updated_at":"2020-01-04 07:33:41"
   }
]

материализовать скрипт

function productFetch(){  
    // $('input.product_code').on('click',function(){
$.ajax({
    type:"GET",
    url: "{{ route('product-fetch') }}",
    success:function(response){
        var productArray = response;
        var productList = {};
        var productListItems = {};
        for (var i = 0; i < productArray.length; i++) {
            productList[productArray[i].product_code] = null;
            productListItems[productArray[i].product_code] = productArray[i];
        }
        $('input.autocomplete').autocomplete({
      data: productList,
      limit: 15,
    //   minLength: 3,
      onAutocomplete:function(reqdata){
        // debugger;
        var product_name = productListItems[reqdata]['product_name'];
          $('input[class="product_name"]').val(product_name);//product_name
          console.log($('.product_name').val());
        //   $('.price').val(productListItems[reqdata]['regular_price']);//product_qty
      }
    });
    },
            error: function (err) {
                console.log(err);
            }
    });
    // });  
}

Добавить новый ряд

var i=1;
    $("#add_row").click(function(e){
        e.preventDefault();
        b=i-1;
        $('#addr'+i).html($('#addr'+b).html());
        $('.tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
        productFetch(); // autocomplete code
        i++; 
    });

html

<div class="row clearfix">
        <div class="col s12">
            <table class="table table-bordered table-hover tab_logic" id="tab_logic">
                <thead>
                    <tr>
                        <th class="text-center"> Product Code </th>
                        <th class="text-center"> Product Name </th>
                        <th class="text-center"> Qty </th>
                        <th class="text-center"> Price </th>
                        <th class="text-center"> IGST </th>
                        <th class="text-center"> GST </th>
                        <th class="text-center"> Total </th>
                    </tr>
                </thead>
                <tbody>
                    <tr id='addr0' class="addr0">
                        <td>
                            <div class="row">
                                <div class="input-field col s12">
                                    <input type="text" id="product_code" name='product_code[]'
                                        class="autocomplete product_code" placeholder="Product Code">
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="row">
                                <div class="input-field col s12">
                                    <input type="text" name='product_name[]' class="product_name"
                                        placeholder="Product Name" required>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="row">
                                <div class="input-field col s12">
                                    <input type="number" id="qty" name='product_qty[]' placeholder='Enter Qty'
                                        class="form-control qty" step="0" min="0" required />
                                </div>
                            </div>

                        </td>
                        <td>
                            <div class="row">
                                <div class="input-field col s12">
                                    <input type="number" id="price" name='price[]' placeholder='Enter Unit Price'
                                        class="form-control price" step="0.00" min="0" required />
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="row">
                                <div class="input-field col s12">
                                    <input type="number" name='igst[]' placeholder='IGST %'
                                        class="form-control igst" step="0.00" min="0" />
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="row">
                                <div class="input-field col s12">
                                    <input type="number" name='gst[]' placeholder='GST %' class="form-control gst"
                                        step="0.00" min="0" />
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="row">
                                <div class="input-field col s12">
                                    <input type="number" name='total[]' placeholder='0.00'
                                        class="form-control total" readonly />
                                </div>
                            </div>

                        </td>
                    </tr>
                    <tr id='addr1' class="addr1"></tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col s12">
            <input id="add_row" class="btn btn-default pull-left add_row" type="button" value="Add Row">
        </div>
    </div>

Если требуется дополнительная информация, пожалуйста, дайте мне знать. я боролся с этой проблемой в течение последних 2 дней.