I want to add a dynamic onclick event on each file upload so that I can remove files at a particular index.

Multiple file upload working perfectly fine but now I want to remove particular file at specific index.

window.onload = () => {

    uploadedfiles = function () {
        var input = document.getElementById('files');
        var children = "";
        for (var i = 0; i < input.files.length; ++i) {
            var click = removeFile(i);
            children += '<li data-index="' + (i) + '"> <a onclick="' + click +'" href="javascript:void(0)">' + input.files.item(i).name + '</a><i class="fas fa-times-circle delete" id="' + input.files.item(i).name + '"></i></li>';
        }
        $("#fileslist").html(children);
    }

    removeFile = function (i) {
        console.log(i);
    }

}

Currently unable to add removeFile() function dynamically. It becomes undefined in the loop.

Can anybody tell me what's wrong going on here?