title: jQuery UI Autocomplete with Multiple Row Inputs of the Same Name
body: <p>I've now worked on this for 3 days, searching high and low for a solution without success.</p>
  
  <p>I have a dynamic HTML table that has 5 inputs in a row. The inputs are named in the array convention (i.e. name=part_no[], name=cost[], and so on). Using jQuery, a button is displayed at the end of the initial row that allows the user to add a new row. When a new row is added, another button is created to allow the user to remove the row. Here is the code for the table and "add row" button:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;table id="part_numbers" class="table"&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td width="16.66%"&gt;
            &lt;!--part number--&gt;
            &lt;label for="part_no[]" class="control-label"&gt;Part No&lt;/label&gt;
            &lt;input class="form-control part_no" type="text" name="part_no[]"&gt;
          &lt;/td&gt;
          &lt;td width="16.66%"&gt;
            &lt;!--list price--&gt;
            &lt;label for="list_price[]" class="control-label"&gt;Suggested List Price&lt;/label&gt;
            &lt;span class="calc_prices" data-toggle="popover" title="Calculated Pricing" data-content="This is where the data will go" data-placement="top"&gt;&lt;i class="fa fa-question-circle" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;
            &lt;input class="form-control" type="text" name="list_price[]"&gt;
          &lt;/td&gt;
          &lt;td width="16.66%"&gt;
            &lt;!--lot charge--&gt;
            &lt;label for="lot_charge[]" class="control-label"&gt;Lot Charge&lt;/label&gt;
            &lt;input class="form-control" type="text" name="lot_charge[]"&gt;
          &lt;/td&gt;
          &lt;td width="16.66%"&gt;
            &lt;!--lead time eng--&gt;
            &lt;label for="lead_time_eng[]" class="control-label"&gt;Lead Time (ENG)&lt;/label&gt;
            &lt;input class="form-control" type="text" id="lead_time_eng[]" name="lead_time_eng[]"&gt;
          &lt;/td&gt;
          &lt;td width="16.66%"&gt;
            &lt;!--lead time production--&gt;
            &lt;label for="lead_time_prod[]" class="control-label"&gt;Lead Time (PROD)&lt;/label&gt;
            &lt;input class="form-control" type="text" id="lead_time_prod[]" name="lead_time_prod[]"&gt;
          &lt;/td&gt;
          &lt;td width="16.66%"&gt;&amp;nbsp;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-sm-12"&gt;
      &lt;a href="javascript: void(0);" class="btn btn-success btn-sm hidden-print addCF"&gt;Add Row&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the code to add and remove a new row:</p>
  
  <pre><code>$('.addCF').click(function(e) {
      e.preventDefault();
      $('#part_numbers').append('&lt;tr&gt;&lt;td width="16.66%"&gt;&lt;input class="form-control part_no" type="text" name="part_no[]"&gt;&lt;/td&gt;&lt;td width="16.66%"&gt;&lt;input class="form-control" type="text" name="list_price[]"&gt;&lt;/td&gt;&lt;td width="16.66%"&gt;&lt;input class="form-control" type="text" name="lot_charge[]"&gt;&lt;/td&gt;&lt;td width="16.66%"&gt;&lt;input class="form-control" type="text" name="lead_time_eng[]"&gt;&lt;/td&gt;&lt;td width="16.66%"&gt;&lt;input class="form-control" type="text" name="lead_time_prod[]"&gt;&lt;/td&gt;&lt;td width="16.66%"&gt;&lt;a href="javascript:void(0)" class="btn btn-danger btn-sm hidden-print remCF"&gt;Remove&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;');
  });
  $('#part_numbers').on('click', '.remCF', function(e) {
      e.preventDefault();
      $(this).parent().parent().remove();
  });
  </code></pre>
  
  <p>When the user starts typing in the part_no field, autocomplete is triggered and a list of matching part numbers are shown. When a part is selected, I'm updating a popover with calculated pricing. </p>
  
  <p>I have no issues bringing the data in on the first row - autocomplete works perfectly, and the popover is updated. <strong>However</strong> when a new row is added and I start typing in the "part_no[]" field, autocomplete does not trigger. I've tried every variation I can think of for iterating through the input fields to trigger the autocomplete and nothing works.</p>
  
  <p>Here is the autocomplete code. jQuery version is 2.03. jQuery UI version is 1.12.1. Any help is greatly appreciated:</p>
  
  <pre><code>$("[name^=part_no").each(function(index) {
          $(this).on('focus',function() {
              $(this).autocomplete({
              delay: 500,
              minLength: 3,
              autoFocus: true,
              source: "items.php",
              select: function(event, ui) {
                  event.preventDefault();
                  var item_no = ui.item.label;
                  var std_cost = ui.item.std_cost;
                  var std_part_price = ui.item.std_part_price;
                  var custom_price = ui.item.custom_price;
                  var existing_price = ui.item.existing_price;
  
                  $(this).val(item_no);
                  $('.calc_prices').popover("destroy").popover({
                      trigger: 'manual'
                  }).popover("show").on('shown.bs.popover', function() {
                      $('.popover-title').text("Calculated Pricing for " + item_no);
                      $('.popover-title').append('&lt;button type="button" class="close popovercloseid"&gt;&amp;times;&lt;/button&gt;');
                      var popover = $(this);
                      var contentEl = popover.next(".popover").find(".popover-content");
                      contentEl.html("Cost: " + std_cost + "&lt;br /&gt;Standard: " + std_part_price + "&lt;br /&gt;Custom: " + custom_price + "&lt;br /&gt;Existing: " + existing_price);
                  })
                  return false;
              },
              change: function(event, ui) {
                  event.preventDefault();
                  var item_no = ui.item.label;
                  var std_cost = ui.item.std_cost;
                  var std_part_price = ui.item.std_part_price;
                  var custom_price = ui.item.custom_price;
                  var existing_price = ui.item.existing_price;
  
                  $(this).val(item_no);
                  $(".calc_prices").popover("destroy").popover({
                      trigger: 'manual'
                  }).popover("show").on("shown.bs.popover", function() {
                      $(".popover-title").text("Calculated Pricing for " + item_no);
                      $(".popover-title").append('&lt;button id="popovercloseid" type="button" class="close"&gt;&amp;times;&lt;/button&gt;');
                      var popover = $(this);
                      var contentEl = popover.next(".popover").find(".popover-content");
                      contentEl.html("Cost: " + std_cost + "&lt;br /&gt;Standard: " + std_part_price + "&lt;br /&gt;Custom: " + custom_price + "&lt;br /&gt;Existing: " + existing_price);
                  })
                  return false;
              }
              });
          });
      });
  </code></pre>