how to delete a selected file from multiple input file from a button click

In my application, I have one input file which lists the selected files below it. each selected file has a button to remove, I need to remove that specific file when clicking the button. but I find it hard, I could remove a single file but when it comes to multiple files it's hard for me to delete. please someone help me with this. thank you.

input field:

<div class="form-group mb-3">
                    <div class="custom-file">
                        <input
                            type="file"
                            class="custom-file-input"
                            id="referenceLetters"
                            name="referenceLetters[]"
                            aria-describedby="inputGroupFileAddon01"
                            onchange="updateReferenceList()"
                            multiple="multiple"
                            accept=".doc,.docx,.pdf"
                        />
                        <label class="custom-file-label" for="referenceLetters">Choose file</label>
                    </div>
                </div>
                <div id="selectedRefereceLetters">
                </div>

by this function listing the selected files:

function updateReferenceList() {
        var ref_input = document.getElementById('referenceLetters');
        var ref_output = document.getElementById('selectedRefereceLetters');
        var ref_children = "";
        for (var i = 0; i < ref_input.files.length; ++i) {
            ref_children += '<ul class="mb-2 file-preview">' +
                                    '<li class="d-flex align-items-center pb-2">'+
                                        '<button id="deleteRef" style="background: transparent; border: none !important; font-size:0;"><i class="ri-close-line mr-2"></i></button>'+
                                        '<i class="ri-file-text-line mr-2 text-gray-400 text-5xl"></i>'+
                                        '<div class="file">'+
                                            '<h4>'+ref_input.files.item(i).name+'</h4>'+
                                        '</div>'+
                                    '</li>'+
                                '</ul>';
        }

        ref_output.innerHTML = ref_children;

        $('#referenceLetters').closest('.form-group').removeClass('has-error');
        $('#referenceLetters-error').remove();
    }

when the user clicks the button with id deleteRef I need that specific file to be removed. how can I achieve this?

using the below method I could remove the selected single file which is not a multiple file input

$("body").on("click","#deletecv",function(){ 
        $("#cv").val('');
        updateCVList();
        return false;
    }); 

I guess a method to change filelist object to an array and remove the items from the array, but still, I don't know to implement it.

I could solve this issue by using the data transfer object in javascript and below is the method.

function updateReferenceList() {
        var ref_input = document.getElementById('referenceLetters');
        var ref_output = document.getElementById('selectedRefereceLetters');
        var ref_children = "";
        for (var i = 0; i < ref_input.files.length; ++i) {
            ref_children += '<div id="ref'+i+'"><ul class="mb-2 file-preview" >' +
                                    '<li class="d-flex align-items-center pb-2">'+
                                        '<button onclick="delRef('+i+')" class="deleteRef" style="background: transparent; border: none !important; font-size:0;"><i class="ri-close-line mr-2"></i></button>'+
                                        '<i class="ri-file-text-line mr-2 text-gray-400 text-5xl"></i>'+
                                        '<div class="file">'+
                                            '<h4>'+ref_input.files.item(i).name+'</h4>'+
                                        '</div>'+
                                    '</li>'+
                                '</ul></div>';
        }

        ref_output.innerHTML = ref_children;

        $('#referenceLetters').closest('.form-group').removeClass('has-error');
        $('#referenceLetters-error').remove();
    }

function delRef(index) {
        var dt = new DataTransfer()
        var input = document.getElementById('referenceLetters')
        var { files } = input
        for (var i = 0; i < files.length; i++) {
            var file = files[i]
            if (index !== i) dt.items.add(file) 
            input.files = dt.files
        }
        updateReferenceList();
    }