error broken layout when loop popup

[tundvgs]

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>

[NikarashiHatsu]

I believe it is because you're missing the "key". The Livewire documentation said

Similar to VueJs, if you render a component inside a loop, Livewire has no way of keeping track of which one is which.

So it is wiser to have a wire:key to every child inside a loop you have.