*.classList.toggle() and *.classList.remove() not working using @script directive

I have a modal element in my template and the definition to the funtion than shows it and closes it , and even when the console.logs are printing data from the livewire event the classList.remove() has no effect over the class list of the element. does anyone can help me. does anyone have a clue on this.

@script
<script>

   // Close modal functionality
    document.querySelector('.close').onclick = function() {
        document.getElementById('barcodeModal').classList.add('hidden');
    }


    function showModal(barcode) {
        console.log('Showing modal with barcode:', barcode);

        const modal = document.getElementById('barcodeModal');
        console.log('modal:', modal);
        console.log('modal ID:', modal.id);
        const modalBarcodeResult = document.getElementById('modal-barcode-result');
        modalBarcodeResult.textContent = barcode;
        console.log('modalBarcodeResult:', modalBarcodeResult);

        console.log("classList before:", modal.classList);
        modal.classList.toggle("hidden");
        console.log("classList after:", modal.classList);
        console.log('modal:', modal);
    }

            $wire.on('productFound', (product) => {
                console.log('Product found :', product);
                showModal('Producto con código: ' + product[0].gtin);
            });

            $wire.on('productNotFound', ( barcode ) => {
                alert('No se encontró el Producto con código : '+ barcode);	
            });
</script>
@endscript