easy autocomplete is not working on class of input box - php

Question

I have one input box and I have applied easy autocomplete, with the help of a class and I have added input button on clicking on that button it adds one more input box with same and I can add as many as input box but easy autocomplete is not working on all the added input box, they have the same class.
var options = {
url: function (phrase) {
return "all_social_media.php";
},
getValue: function (element) {
return element.name;
conole.log(element.name);
},
ajaxSettings: {
dataType: "json",
method: "POST",
data: {
dataType: "json",
}
},
preparePostData: function (data) {
data.phrase = $(".social_media").val();
return data;
console.log(data);
},
requestDelay: 400,
list: {
onSelectItemEvent: function() {
}
}
};
$(".social_media").easyAutocomplete(options);

Answer 1

found the solution, I have to rewrite the code of easy autocomplete code at the time of dynamically generated text box
//create new socials and expenses fields
$("#add_socials").click(function(){
var html_data = $('<div class="row" style="margin-top:10px;"><div class="col-md-5"><input type="text" class="form-control social_media" placeholder="Enter Social Media" name="social_media"></div><div class="col-md-5"><input type="text" class="form-control social_media_expenses" name="social_media_expenses" placeholder="Enter Expenses"></div><div class="col-md-2"><button type="button" class="btn btn-icon btn-danger mr-1" onclick="delete_socials(this)"><i class="fa fa-times"></i></button></div></div>');
$(".add_social_data").append(html_data);
// easy auto complete is not working on dynamic generate text box, need to do this again
var options = {
url: function (phrase) {
return "all_social_media.php";
},
getValue: function (element) {
return element.name;
conole.log(element.name);
},
ajaxSettings: {
dataType: "json",
method: "POST",
data: {
dataType: "json",
}
},
preparePostData: function (data) {
data.phrase = $(".social_media").val();
return data;
console.log(data);
},
requestDelay: 400,
list: {
onSelectItemEvent: function() {
// get_order_id = $("#order_line_entry").getSelectedItemData().order_id;
// console.log(get_order_id);
}
}
};
$(".social_media").easyAutocomplete(options);
html_data.find('.social_media').easyAutocomplete(options);
});
for me, it is working fine.