jQuery autocomplete doesn't work on dynamically created input text fields? (ajax call included) [duplicate]

Question

I have an input text with id school_name field that I would like to apply jQuery autocomplete on. I managed to make it work making an ajax call and fetch the data and show them as options but autocomplete does not work on cloned input text fields although I am using on() to bind. How I could make it work?

See my jQuery code below:

$(document).on('keydown.autocomplete,focus,click', "#school_name,input[name='school_name']", function (event) {
    var getData = function (request, response) {
        $.getJSON(
            "https://api.apispreadsheets.com/data/JIbRHVPsNwrMkmav/?dataFormat=column&query=select Sxoleio,Moria from JIbRHVPsNwrMkmav where MM_ID = " + request.term,
            function ( data ) {
                response( data['Sxoleio'] );
            });
    };
    
    var selectItem = $(document).on('autocompleteselect', "#school_name", function (event, ui) {
        // event.preventDefault();
        $(event.target).val(ui.item.value);
        return false;
    });
    
    var changeItem = $(document).on('autocompletechange', "#school_name", function (event, ui) {
        // $(this).val("").css("display", 2);
        $(event.target).closest('.school').find('#school_points').val(7);
    });
 
    $(event.target).autocomplete({
        source: getData,
        select: selectItem,
        minLength: 3,
        delay: 250,
        change: changeItem
    });
});
$("#school_name").autocomplete('enable');

I tried on() event binder. I tried $(this). Tried $(event.target) or even $(event.target).closest("parent selector").find("specific selector") but it only worked for the first one.