Javascript 如何为动态创建的输入框应用自动完成

我有5个输入框来添加产品，如果用户想添加更多产品，他可以单击添加更多产品，然后会出现5个新的动态创建的文本框。我的问题是，我无法为我的动态输入框提供自动完成功能，但无法为我的静态输入框提供自动完成功能

我的HTML代码

<div class="pro" id="dynamicInput">
<div>Product Name 1
<input style="border:2px solid #7f9db9" name="product_1" id="in_pc_item_moq_unit_type1" class="ui-autocomplete-input" maxlength="100" placeholder="Enter your product name" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
<input type="hidden" id="in_pc_item_moq_1">
</div>
<div>Product Name 2

<input style="border:2px solid #7f9db9" name="product_2" id="in_pc_item_moq_unit_type2" class="ui-autocomplete-input" maxlength="100" placeholder="Enter your product name" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
</div>
<div>Product Name 3
<input style="border:2px solid #7f9db9" class="ui-autocomplete-input" id="in_pc_item_moq_unit_type3" maxlength="100" name="product_3" placeholder="Enter your product name" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
</div>
<div>Product Name 4

   <input style="border:2px solid #7f9db9" class="ui-autocomplete-input" id="in_pc_item_moq_unit_type4" maxlength="100" name="product_4" placeholder="Enter your product name" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
</div>
 <div>Product Name 5

   <input style="border:2px solid #7f9db9" class="ui-autocomplete-input" id="in_pc_item_moq_unit_type5" maxlength="100" name="product_5" placeholder="Enter your product name" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
 </div>
            </div>
<div class="ta m15">
    <input name="gluserid" id="glid" value="7171786" type="hidden">     <input type="button" value="Add more product"  onclick="addInput('dynamicInput');">
     <input type="submit" value="submit"  name="submit">


        </div>

产品名称1
产品名称2
产品名称3
产品名称4
产品名称5

我的动态添加inputbox的java脚本代码是

<script type="text/javascript">

        var counter = 1;
        var limit = 4;
        var num=6;
function addInput(divName){
     if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {
         for(var i=1;i<=5;i++)
         {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Product Name " + (num) + "<input style='border:2px solid #7f9db9'  class='ui-autocomplete-input' id='in_pc_item_moq_unit_type" + num + "' maxlength='100' type='text' name='product_" + num + "' placeholder='Enter your product name'>";
          document.getElementById(divName).appendChild(newdiv);
          num++
      }
    counter++;
     }
}

    </script>

var计数器=1；
var限值=4；
var-num=6；
函数addInput（divName）{
如果（计数器==限制）{
警报（“您已达到添加“+计数器+”输入的极限”）；
}
否则{
对于（var i=1；i尝试以下方法：

for(var i=1;i<=5;i++)
{
   var newdiv = document.createElement('div');
   newdiv.innerHTML = "Product Name " + (num) + "<input style='border:2px solid #7f9db9'  class='ui-autocomplete-input' id='in_pc_item_moq_unit_type" + num + "' maxlength='100' type='text' name='product_" + num + "' placeholder='Enter your product name'>";
   document.getElementById(divName).appendChild(newdiv);
   num++;
   auto_suggest('in_pc_item_moq_unit_type' + num); // apply autocomplete after element creation
}

for（var i=1；i试试这个：

for(var i=1;i<=5;i++)
{
   var newdiv = document.createElement('div');
   newdiv.innerHTML = "Product Name " + (num) + "<input style='border:2px solid #7f9db9'  class='ui-autocomplete-input' id='in_pc_item_moq_unit_type" + num + "' maxlength='100' type='text' name='product_" + num + "' placeholder='Enter your product name'>";
   document.getElementById(divName).appendChild(newdiv);
   num++;
   auto_suggest('in_pc_item_moq_unit_type' + num); // apply autocomplete after element creation
}

对于（var i=1；itry:auto_suggest（'in_pc_item_moq_unit_type'+num）；我希望这将适用于任何其他建议try:auto_suggest（'in_pc_item_moq_unit_type'+num）；我希望这将适用于任何其他建议