动态生成的输入的唯一值

Question

任何人都可以通过我尝试做的一种形式帮助我，其中在JQuery中生成输入，并使用PHP从MySQL表中获取数据，一切正常，除了使用自动完成功能

我有一个包含动态创建的文本输入的表单（它们也具有自动完成ID和自动完成类），文本输入具有自动完成功能，可从数据库中提取数据。

下面的代码可用于创建文本输入，每个输入都有其自己的自动完成功能，但是，选择自动完成结果后，它将更改所有创建的输入，而不是没有自己的值。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="form-group">  
  <form name="add_name" id="add_name">  
    <div class="table-responsive">  
      <table class="table table-bordered" id="dynamic_field">  
        <tr>  
          <td><input type="text" name="product[]" id='autocomplete' class="form-control name_list autocomplete"/><input type='hidden' id='selectuser_id' name="productId[]" class="selectuser_id" /></td> 
          <td><button type="button" name="add" id="add" class="btn btn-success">Add</button>
          </td>
        </tr>  
      </table>  
      <input type="button" name="submit" id="submit" class="btn btn-info" value="submit" />  
    </div>  
  </form>  
</div>  


<script>  
$(document).ready(function(){
  var result = function( request, response ) {
                       // Fetch data
                       $.ajax({
                        url: "fetch.php",
                        type: 'post',
                        dataType: "json",
                        data: {
                         search: request.term
                        },
                         success: function( data ) {
                         response( data );
                        }
                       });
                    };
  
  var fetch2 = function (event, ui) {
                       // Set selection
                       $('.autocomplete').val(ui.item.label); // display the selected text
                       $('.selectuser_id').val(ui.item.value); // save selected id to input
                       return false;
                    };

  // Single Select
  $( ".autocomplete" ).autocomplete({
    source: result, select: fetch2
    });

  function split( val ) {
    return val.split( /,\s*/ );
  }
  function extractLast( term ) {
    return split( term ).pop();
  }

  var i=1;  
  $('#add').click(function(){  
    i++;
    $('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="product[]" id="autocomplete" class="form-control name_list autocomplete"/><input type="hidden" id="selectuser_id" name="productId[]" class="selectuser_id"/></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
    // Single Select
    $( ".autocomplete").autocomplete({
      source: result, select: fetch2
      });
  });  

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

  $('#submit').click(function(){            
    $.ajax({  
    url:"/includes/cotprod.php",  
    method:"POST",  
    data:$('#add_name').serialize(),  
    success:function(data) {  
      alert(data);  
      $('#add_name')[0].reset();  
      window.location.replace("../send.php");
                            }  
                        });  
                    }); 

                });  
</script>