Javascript активный MutationObserver для работы с различными элементами

Question

Я хочу добавить или удалить required Аттр, когда li число изменений в ul, Если нет liс required Аттр будет добавлен, и если есть liс required Аттр будет удален.

Функция прекрасно работает, но только для первого input[type="file"]Я хочу, чтобы функция выполняла сортировку для всех входных файлов на странице. Я хочу, чтобы он наблюдал за изменениями в каждом из них.

Я думал делать

const fileList = document.querySelectorAll('ul.file-list')[x];
observer.observe(fileList, {
    childList: true
})

но у меня есть две проблемы:

1. как мне найти расположение массива ul.file-list Я работаю в (вместо x).
2. Я предпочитаю не использовать прослушиватель событий.

Любая помощь будет отличной.

const observer = new MutationObserver(function(mutations){
    mutations.forEach(function(mutation){
        let liLength = mutation.target.getElementsByTagName("li").length;
        if(mutation.addedNodes.length){
            console.log('added',mutation);
            if(liLength != 0){
                mutation.target.parentElement.getElementsByTagName('input')[0].required = false;
            }
        }
        if(mutation.removedNodes.length){
            if(liLength == 0){
                mutation.target.parentElement.getElementsByTagName('input')[0].required = true;
            }
        }
    });
});

const fileList = document.querySelector('ul.file-list');
observer.observe(fileList, {
    childList: true
})

Это HTML-разметка. Это один из 27 'уль на странице у меня

<div class="custom-file" id="tz-file">
    <label class="custom-file-label" for="tzfile">add file</label>
    <ul class="file-list">
        <li><a href="./uploads/9999999/1.pdf" target="_blank"> 1.pdf </a>
            <span class="item-file" id="2018-9999999-21314-1">remove file</span></li>
    </ul>
    <input type="file" class="custom-file-input" id="tzfile" name="tzfile">
</div>