call again to function change function jquery

Question

I´m traying to create one function in jquery for upload imgs to my server with laravel, when my img it´s uploaded create a div with information for this img and buttons to show it and delete it.

My problem it´s that when i delete my img, show again my input file but if i select another img, my event not start. Only i can execute once.

my code its:

// create varaible that contain value input
     $("#dni_cliente").on("change", function(e){

        console.log("entro");

        data = new FormData();
        let token = $("meta[name='csrf-token']").attr("content");
        data.append('file', $("#dni_cliente")[0].files[0]);
        data.append('_token', token);

        $(".dni").addClass('borderClass');

        $.ajax({
            url: document.location.origin+'/admin/precontratos/precontratos/dataClientImages',
            method: 'POST',
            processData: false,
            contentType: false,
            data: data,
            success: function(response){
                uploadFileDni();
                $("#imageDniClient").attr('src', response);
            },
            error: function(xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            }
        });
     });

/** FUNCTIONS BLOCK TO PROGRESS BAR */
function uploadFileDni() {
    var dni = $("#dni_cliente")[0].files[0];

    if(dni != null ){
        let token = $("meta[name='csrf-token']").attr("content");
        let url = document.location.origin+'/admin/precontratos/precontratos/dataClientImages';

        var formdata = new FormData();
        formdata.append("file", dni);
        formdata.append('_token', token);

        var ajax = new XMLHttpRequest();
        ajax.upload.addEventListener("progress", progressDni, false);
        ajax.addEventListener("load", completeHandler, false);
        ajax.addEventListener("error", errorHandler, false);
        ajax.addEventListener("abort", abortHandler, false);
        ajax.open("POST", url);
        ajax.send(formdata);
    }
}

function progressDni(event) {

    var dni = $("#dni_cliente")[0].files[0];

    if(dni != null){
        $("#container_files").removeClass('d-none');
        $("#container_files").append(`
            <div class="row justify-content-center row_dni">
                <div class="col-md-4 file_name align-items-center text-center">${dni.name}</div>
                <div class="col-md-4 bg-white progress justify-content-center align-items-center text-center">

                </div>
                <div class="col-md-4 actions align-items-center text-center">
                    <i class="fas fa-times ml-3 text-danger fa-2x delete_dni"></i>
                    <i class="far fa-eye text-danger ml-3 fa-2x show_dni"></i>
                </div>
            </div>
            <hr id="hr_id">
        `);
        

        $(".progress").append(`
            <progress class="d-none progressBarDni" data-text="" value="0" max="100" style="width: 350px; height: 35px;"></progress>
            <h3 id="status"></h3>
            <p id="loaded_n_total"></p>
        `);

        $(".dni_cliente").hide();

        $(".progressBarDni").removeClass('d-none');

        var percent = (event.loaded / event.total) * 100;
        $(".progressBarDni").val(Math.round(percent));
        $(".progressBarDni").attr("data-text", Math.round(percent) + "%")

        $("#status").hide();

        $(".show_dni").on('click', function(){
            $("#modalClientDniImages").modal('show');
        });

        $(".delete_dni").on('click', function(){
            $(".row_dni").empty();
            $(".dni_cliente").removeClass('borderClass');
            $("#hr_id").remove();
            $(".dni_cliente").show();
        });

    }
}

HTML

<div class="col-md-3 text-center">
            <div class="file-drop-area dni dni_cliente mb-3">
                <span class="fake-btn text-dni"><b>IMAGEN DNI ANVERSO</b></span>
                <input class="file-input" type="file" name="fotos[dni1]" id="dni_cliente" accept="image/*">
            </div>
        </div>
        <div class="col-md-3 text-center">
            <div class="file-drop-area dni2 dni2_cliente mb-3">
                <span class="fake-btn text-dni"><b>IMAGEN DNI REVERSO</b></span>
                <input class="file-input" type="file" name="fotos[dni2]" id="dni2_cliente" accept="image/*">
            </div>
        </div>
        <div class="col-md-3 text-center">
            <div class="file-drop-area cartilla cartilla_cliente mb-3">
                <span class="fake-btn text-cartilla" style="font-size: 0.7em;"><b>IMAGEN CARTILLA O CERTIFICADO TITULARIDAD</b></span>
                <input class="file-input" type="file" name="fotos[cartilla]" id="cartilla_cliente" accept="image/*">
            </div>
        </div>
        <div class="col-md-3 text-center">
            <div class="file-drop-area pension certificado_cliente mb-3">
                <span class="fake-btn text-pension" style="font-size: 0.7em;"><b>IMAGEN CERTIFICADO DE PENSIÓN O INGRESOS</b></span>
                <input class="file-input" type="file" name="fotos[pension]" id="certificado_cliente" accept="image/*">
            </div>
        </div>

PD: i trayed .live function but my jquery version it´s not supported because webrowser return that it´s not a function

thanks for readme and help me