Javascript Not Working After Rerender

I've got a Livewire component, with multiple checkboxes on it. I've set up some vanilla Javascript so that every time a checkbox is selected, a class is either added or removed to a particular element within my blade. This is working fine, until I do an action that goes to the server and re-renders the page, then it's not working correctly.

In my blade, at the bottom I've got this;

<script type='text/javascript'>
    function checkCheckboxes() {   
        // This function checks which checkboxes are checked, and adds/removes classes. This is working fine
    }

    document.addEventListener('livewire:init', function () {
        checkCheckboxes();
    });

    document.addEventListener('livewire:init', () => {
        Livewire.on('modalClosed', (event) => {
           checkCheckboxes();
        });
    });
</script>

So it works on initial load, and when any checkboxes are selected. But if, for example, a checkbox is selected and then a modal is closed (which in turn causes a re-render of the page, which I've confirmed by adding $this->skipRender() to my PHP in the modalClosed() function) then it's not calling checkCheckboxes() and not adding the correct classes.