JS click event listener in laravel livewire component?

I'm trying to add some JS to add a click event to an element within a livewire component. The click event works as expected on first load, however as soon as I run a wire:click, the JS click events no longer work?

I can see that livewire is removing / updating the dom elements when I click the wire:click element so unsure whether this may have something to do with it.

What am I doing wrong? How should I be registering click events to livewire elements in JS and ensure they always work?

My javascript:

document.addEventListener('livewire:load', function () {

let pb_responsive_button = [...document.querySelectorAll('.js-pb-responsive')];

pb_responsive_button.map(function (btn) {
    btn.addEventListener("click", function () {
        console.log('click');
    });
});

}); livewire:

Add Page Block

public function addComponentActive(bool $bool) { $this->add_component_active = $bool; } my view:

@if ($add_component_active === true) ..... @endif Homepage Add Page Block M T D UPDATE:

I've updated it to show and hide the blocks rather than display it in a conditional if statement which ensures the click events still work, since the element still exists on page.

... Surely there is a better way to handle this. I notice I have a livewire:load eventListener? Is there another event I should be listening to when the livewire view is reloaded to reinitise the JS events?

Any help would be much appreciated.