autocomplete on dynamic search field

Question

first of all the project i'm doing is on WordPress, I have a problem finding a solution for my calculating form, so I have a jquery file that creates an autocomplete for a search field and another jquery file that duplicate the field to a maximum of 7 and when submitted should take some numbers from the database and sum them. So my problem comes when I add new field the autocomplete work just on the first one that was loaded with the page. how can I change the autocomplete so that it could work in the dynamic field?

the autocomplete jquery

jQuery.noConflict();
jQuery(document).on("focus", ".dish", function($) {
 var m = ["lasagna","pasta",...,"buttered fish","fish curry"]; 

if (!jQuery(this).is(".aced"))
jQuery(this).addClass("aced").autocomplete({
  source: m
});
});

then here my ad new field jquery

jQuery(document).ready(function(e){
var html = '<div class="add-f"><div><label class="plate_label">Dish</label><input type="text" name="dish_name[]" class="dish" placeholder="Enter plate name" /></div><div><label class="quantity_label">Quantity:</label><input type="text" name="dish_quantity[]"  class="quantity" placeholder="Enter gram or pieces/slices" /><a href = "#" id = "remove" ><font color="red"> X</font></a></div> </div>';
var max_rows = 6;
var x = 1;
jQuery("#add_more").click(function(e){
    if (x <= max_rows){
        jQuery("#container-form").append(html);
        x++;
    }
});
jQuery("#container-form").on('click','#remove',function(e){
    jQuery(this).parents('.add-f').remove();
    x--;
});
});

and last my html part from my custome template

<form method = "POST">
            <div id = "container-form">
                <div><label class="plate_label">Dish:</label><input type="text" name="dish_name[]" id="dish" class="dish" placeholder="Enter plate name" ></div>
                    <div><label class="quantity_label">Quantity:</label><input type="text" name="dish_quantity[]"  class="quantity" placeholder="Enter gram or pieces/slices" /></div>
                </div>
                <p />
                <p><br><input id="add_more" type="button" value="Add More"></p>
                <input type="hidden" name="submitted" value="1">
                    <p><br><input name="submit" type="submit" value="Submit"></p>
                    </form>

thanks you all for your time

Answer 1

• I have combined both your auto-complete and "add new field" scripts. If you look at the code, the setupDishAc() setups the auto-complete function.
• In the "add new field" script, I replaced the html variable with a getDishHtml() function (so that it's easier to set a unique ID to the "dish" input).
• In each dynamically-generated "dish box", the "remove" button is assigned the remove class and not id. Note that the first (static) "dish" input should have the id set to dish.

With that said, try this script:

// The code was beautified via http://jsbeautifier.org/ with 2 spaces indentation.
jQuery(document).ready(function($) {
  var dishes_list = ["lasagna", "pasta", '...', "buttered fish", "fish curry"];
  var max_rows = 6;
  var x = 1;

  // Setup Autocomplete on an element.
  function setupDishAc(element) {
    if (!$(element).is('.aced')) {
      $(element).addClass('aced').autocomplete({
        source: dishes_list
      });
    }
  }

  // Get the HTML for a "dish" box.
  function getDishHtml(n) {
    return '<div class="add-f"><div><label class="plate_label">Dish</label><input type="text" id="dish-' + n + '" name="dish_name[]" class="dish" placeholder="Enter plate name" /></div><div><label class="quantity_label">Quantity:</label><input type="text" name="dish_quantity[]"  class="quantity" placeholder="Enter gram or pieces/slices" /></div><a href="#" class="remove" title="Remove" style="color: red;">&times;</a></div>';
  }

  // Add new dynamic "dish" box.
  $("#add_more").click(function(e) {
    e.preventDefault();

    if (x <= max_rows) {
      $("#container-form").append(getDishHtml(x));
      setupDishAc('#dish-' + x);
      x++;
    }
  });

  // Remove a dynamic "dish" box.
  $("#container-form").on('click', '.remove', function(e) {
    e.preventDefault();

    $(this).parents('.add-f').remove();
    x--;
  });

  // Setup for the first "dish" box.
  setupDishAc('#dish');
});

Try a live demo on CodePen.