Jquery не меняется label в input file

Имеется input file внутри формы (form), а форма внутри списка(ul).

  <ul id="file{{ $theme->id }}" class="collapse tree" aria-labelledby="file" >
    <form class="form ml-2 mb-2 mt-0" role="form" id="form{{ $theme->id }}" method="POST" action="{{ url('') }}" enctype="multipart/form-data">
 @csrf
 <input type="hidden" name="themeId" value="{{ $theme->id }}">
 <input type="file" name="themesFiles[]" id="themesFiles{{ $theme->id }}" class="inputfile-addThemeFile"  multiple="true"/>
 <label for="themesFiles{{ $theme->id }}" class="btn btn-sm btn-primary inputlabel-addThemeFile{{ $theme->id }} mb-0">
 <i class="fas fa-plus-square h5-responsive white-text pr-2" title="Добавить файлы"></i>
Добавить файлы
</label>
</form>
</ul>

Хочу чтобы при выборе файлов label менялся на спинер и надпись "файлы ожидают загрузки".

<script>
$('#themesFiles{{ $theme->id }}').change(function(e){
$('.inputlabel-addThemeFile{{ $theme->id }}').html('<div class="spinner-border text-info" role="status"><span class="sr-only"></span></div><br> <small>файлы ожидают загрузки</small>');
});
</script>

Но ничего не происходит, в консоле все чисто, ID инпута и скрипта совпадают. Заранее благодарю за помощь)