Как динамически отображать имя файла для файла ввода?

Question

Это html (не беспокойтесь о пробелах в классах, это bcz Я использую несколько классов в bootstrap)

<input type="file" id="file-upload" class="inputfile btn btn-file" name="image" data-multiple-caption="{count} files selected" multiple></input>
<label for="file-upload" class="btn custom-file-upload mt-2 pt-1 pb-0"><i class="far fa-lg fa-image"></i><span></span></label>

Это javascript для ввода, который прекрасно работает для одного элемента, но при его динамическом использовании (много элементов с одинаковым html) он не отображает имя файла на метке ввода, которую я щелкнул, вместо этого он отображается на первый элемент.

$(document).ready(function() {
    $( '.inputfile' ).click( function()
    {
        var $input   = $(this),
            $label   = $(this).next( 'label' ),
            labelVal = $label.html();

        $input.on( 'change', function( e )
        {
            var fileName = '';

            if( this.files && this.files.length > 1 )
                fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
            else if( e.target.value )
                fileName = e.target.value.split( '\\' ).pop();

            if( fileName )
                $label.find( 'span' ).html( fileName );
            else
                $label.html( labelVal );
        });

        // Firefox bug fix
        $input
        .on( 'focus', function(){ $input.addClass( 'has-focus' ); })
        .on( 'blur', function(){ $input.removeClass( 'has-focus' ); });
    });
});