JavaScript not working in an Elementor widget

Hello

I created a javascript to display a list of PDF files filtered by a SELECT (year).

It works very well on an HTML page, but when I integrate this script into an Elementor HTML widget it no longer works.

There is no error message in the console, but changing the SELECT does not change the class of the <div class="pdf-item"> items.

Here is the HTML and script:

<style>
    .pdf-item  display: none; 
    .pdf-item.visible  display: block; 
</style>
<select id="yearFilter">
    <option value="">Tous les ans</option>
    <option value="2022">2022</option>
    <option value="2023">2023</option>
</select>

<div id="pdfList">
    <div class="pdf-item" data-year="2022">Document 1</div>
    <div class="pdf-item" data-year="2023">Document 2</div>
    <div class="pdf-item" data-year="2022">Document 3</div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const yearFilter = document.getElementById('yearFilter');
        const pdfList = document.getElementById('pdfList');

        console.log('DOM fully loaded and parsed');

        if (yearFilter) 
            console.log('yearfilter existe');
            yearFilter.addEventListener('change', function () 
               debugger; // Ajoutez cette ligne avant l'événement change pour activer le débogage
                console.log('Change event triggered');
                const selectedYear = this.value;
                console.log('Selected Year:', selectedYear);

                pdfList.querySelectorAll('.pdf-item').forEach(item => 
                    const itemYear = item.dataset.year;
                    console.log('Item Year:', itemYear);

                    if (!selectedYear );
            );
         else 
            console.log('Year filter element not found');
        
    });
</script>