如何使用JavaScript / jQuery在Laravel中的表单重复行上自动填充多个字段？

如何解决如何使用JavaScript / jQuery在Laravel中的表单重复行上自动填充多个字段？

我在具有多字段的Laravel项目中设置了一个表单重复器，我需要这些字段根据第一个字段的选择自动填充数据。

我的第一行工作正常，但是自动填充不适用于其余行。

这是我的代码。我是想念东西还是在某处做错了事？希望能为解决这个难题提供一些帮助。

我的控制器上的相关代码：

public function getProducts(Request $request){

      $search = $request->search;

      if($search == ''){
        $products = Product::orderby('product_code','asc')->select('id','product_code','product_name','product_price','product_min_price')->limit(5)->get();
      }else{
        $products = Product::orderby('product_code','product_min_price')->where('product_code','like','%' .$search . '%')->limit(5)->get();
      }

      $response = array();
      foreach($products as $product){
        $response[] = array(
          "value"=>$product->product_code,"label"=>$product->product_name,"price"=>$product->product_price,"minprice"=>$product->product_min_price
        );
      }

      return response()->json($response);
    } 

中继器视图HTML：

<form class="form repeater-default">
                <div data-repeater-list="group-a">
                  <div data-repeater-item>
                    <div class="row justify-content-between">
                      <div class="col-md-2 col-sm-12 form-group">
                        <label>Product Code</label>
                        <input type="text" class="form-control" id="product_code">
                      </div>
                      <div class="col-md-2 col-sm-12 form-group">
                        <label>Product Name</label>
                        <input type="text" class="form-control" id="product_name">
                      </div>
                      <div class="col-md-2 col-sm-12 form-group">
                        <label>Product Price</label>
                        <input type="text" class="form-control" id="product_price">
                      </div>
                      <div class="col-md-2 col-sm-12 form-group">
                        <label>Product Minimum Price</label>
                        <input type="text" class="form-control" id="product_min_price">
                      </div>
                      <div class="col-md-2 col-sm-12 form-group d-flex align-items-center pt-2">
                        <button class="btn btn-danger" data-repeater-delete type="button"> <i class="bx bx-x"></i>
                          Remove Product
                        </button>
                      </div>
                    </div>
                    <hr>
                  </div>
                </div>
                <div class="form-group">
                  <div class="col p-0">
                    <button class="btn btn-primary" data-repeater-create type="button"><i class="bx bx-plus"></i>
                      Add Product
                    </button>
                  </div>
                </div>
              </form> 

我认为自动填充的JavaScript：

<script>
    
    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
    $(document).ready(function(){

      $( "#product_code" ).autocomplete({
        source: function( request,response ) {
          
          $.ajax({
            url:"{{route('vendor.estimates.getProducts')}}",type: 'post',dataType: "json",data: {
              _token: CSRF_TOKEN,search: request.term
            },success: function( data ) {
              response( data );
            }
          });
        },select: function (event,ui) {
          // Set selection
          $('#product_code').val(ui.item.value);
          $('#product_name').val(ui.item.label);
          $('#product_price').val(ui.item.price);
          $('#product_min_price').val(ui.item.minprice);
          return false;
        }
      });

    });
  </script> 

我的表单转发器的JavaScript：

<script>
    $(document).ready(function () {
  // form repeater jquery
  $('.file-repeater,.contact-repeater,.repeater-default').repeater({
    show: function () {
      $(this).slideDown();
    },hide: function (deleteElement) {
      if (confirm('Are you sure you want to delete this element?')) {
        $(this).slideUp(deleteElement);
      }
    }
  });

});
  </script>