error broken layout when loop popup

I'm getting a pretty fatal error when creating a loop with multiple popups. when i use events like pagination click the buttons are auto duplicated after each event and when push to my server the layout broken
"Cannot read properties of undefined (reading 'on')" alpinejs

<div class="flex space-x-1 justify-around">
    @foreach($list_lang as $lang)
        <x-admin.modalReviewer :value="1" :lang="$lang" :haslang="$has_lang[$lang]" :type="$type" :id="$id">
            <x-slot name="trigger">
                <button class="p-1 text-blue-600 hover:bg-blue-600 hover:text-white rounded">
                    @if($has_lang[$lang])
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"></path>
                        </svg>
                    @else
                        <svg class="w-5 h-5" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/>
                        </svg>
                    @endif
                    <span class="text-uppercase">{{ $lang }}</span>
                </button>
            </x-slot>
        </x-admin.modalReviewer>
    @endforeach
</div>

Use the Blade component snippet as the starting entry point, then inspect the Livewire update and Alpine popup behavior around pagination and server pushes. Reproduce the issue with multiple popups and confirm the duplicated buttons, broken layout, and undefined on error; done means those symptoms no longer occur.