I am encountering an issue with my autocomplete function. It works perfectly fine for the input field with the id "field10" that is already created. However, when I dynamically generate new input fields, the function does not seem to work on them. I have pre-defined the names of these new input fields before creating them and I have verified that the ids are correct. Can someone help me figure out what might be causing this problem? Below is the code snippet used to generate the new input fields.
//Creating New Input Fields
$(document).ready(function() {
var max_fields = 10; //Maximum number of input fields allowed
var wrapper = $(".array_wrap"); //Wrapper for input fields
var add_button = $(".add_fields"); //Class or ID of the add button
var x = 1; //Initial input field counter set to 1
//When user clicks on the add button
$(add_button).click(function(e){
e.preventDefault();
//Check if maximum number of input fields are reached
if(x < max_fields){
x++; //Increment input field counter
//Add a new input field
var inputA = document.createElement('a');
$(inputA).attr("href", "javascript:void(0);");
$(inputA).attr("class","remove_field")
inputA.innerText ="Remove";
var inputName = document.createElement('input');
$(inputName).attr('id','field10' + x);
$(inputName).attr('type','text');
$(inputName).attr('name','input_array_name[]');
$(inputName).attr('placeholder','Subject');
$(inputName).appendTo($(wrapper));
$(inputA).appendTo($(wrapper));
}
});
//
These are the parameters passed to the autocomplete function...
autocomplete(document.getElementById("field10"), countries);
autocomplete(document.getElementById("field101"), countries);
autocomplete(document.getElementById("field102"), countries);
autocomplete(document.getElementById("field103"), countries);
autocomplete(document.getElementById("field104"), countries);
autocomplete(document.getElementById("field105"), countries);
autocomplete(document.getElementById("field106"), countries);