What seems to be the problem:
Steps to Reproduce:
Are you using the latest version of Livewire:
Do you have any screenshots or code examples:
I have two buttons per row I would like that when I click on Edit the Edit modal would open and when I click on the Edit2 modal it would open the Edit 2 modal
I have this table:
@if (session()->has('message'))
<div class="bg-teal-100 border-t-4 border-teal-500 rounded-b text-teal-900 px-4 py-3 shadow-md my-3" role="alert">
<div class="flex">
<div>
<p class="text-lg">{{ session('message') }}</p>
</div>
</div>
</div>
@endif
@if($isOpen)
@include('livewire.edit1')
@include('livewire.edit2')
@endif
<table id='hometable' class="min-w-full">
<thead>
<tr>
<th
class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
Id
</th>
<th
class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
Name
</th>
</tr>
</thead>
<tbody class="bg-white">
@foreach ($polls as $index => $poll)
<tr>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
<div class="flex items-center">
<div class="text-sm leading-5 text-gray-500"><a href="/{{$task->id }}/show">{{ $poll->id }}</a></div>
</div>
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
<div class="text-sm leading-5 text-gray-900"><a href="/{{$task->id }}/show">{{ $poll->name }}</a></div>
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
<div class="flex justify-center bg-grey-lighter mb-1 text-sm leading-3 text-gray-900"> <button data-toggle="modal" data-target="#editModal" wire:click="edit({{$poll}})" class="bg-white text-gray-800 font-bold rounded border-b-2 border-blue-500 hover:border-blue-600 hover:bg-blue-500 hover:text-white shadow-md py-2 px-6 inline-flex items-center">
<span class="mr-1">Edit</span>
</button>
</div>
<div class=" flex justify-center bg-grey-lighter text-sm leading-3 text-gray-900"> <button data-toggle="modal" data-target="#edit2Modal" wire:click="edit({{$poll}})" class="bg-white text-gray-800 font-bold rounded border-b-2 border-green-500 hover:border-green-600 hover:bg-green-500 hover:text-white shadow-md py-2 px-6 inline-flex items-center">
<span class="mr-1">Edit2</span>
</button>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
<ul class="w-7/12 px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
{{ $posts->links() }}
</ul>
livewire.edit
<div id="editModal"class="fixed z-10 inset-0 overflow-y-auto ease-out duration-400">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 transition-opacity">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
</div>
<!-- This element is to trick the browser into centering the modal contents. -->
<span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full" role="dialog" aria-modal="true" aria-labelledby="modal-headline">
<!-- Information Modal -->
<div class="flex justify-between border-b border-gray-100 px-5 py-4">
<div>
<i class="fas fa-exclamation-circle text-blue-500"></i>
<span class="font-bold text-gray-700 text-lg">Information</span>
</div>
<div>
<button wire:click="closeModal()"><i class="fa fa-times-circle text-red-500 hover:text-red-600 transition duration-150"></i></button>
</div>
</div>
<div class="px-10 py-5 text-gray-600">
Lorem ipsum dolor sit amet, consectetur adipi scing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div id="buttonChange" class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<span class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
<button wire:click.prevent="update()" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-blue-600 text-base leading-6 font-medium text-white shadow-sm hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:shadow-outline-green transition ease-in-out duration-150 sm:text-sm sm:leading-5">
Change
</button>
</span>
<span class="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto">
<button id="buttonCancel" wire:click="closeModal()" type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-base leading-6 font-medium text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition ease-in-out duration-150 sm:text-sm sm:leading-5">
Cancel
</button>
</span>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- component -->
livewire.edit2
<div id="edit2Modal"class="fixed z-10 inset-0 overflow-y-auto ease-out duration-400">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 transition-opacity">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
</div>
<!-- This element is to trick the browser into centering the modal contents. -->
<span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full" role="dialog" aria-modal="true" aria-labelledby="modal-headline">
<!-- Information Modal -->
<div class="flex justify-between border-b border-gray-100 px-5 py-4">
<div>
<i class="fas fa-exclamation-circle text-blue-500"></i>
<span class="font-bold text-gray-700 text-lg">Information</span>
</div>
<div>
<button wire:click="closeModal()"><i class="fa fa-times-circle text-red-500 hover:text-red-600 transition duration-150"></i></button>
</div>
</div>
<div class="px-10 py-5 text-gray-600">
Lorem ipsum dolor sit amet, consectetur adipi scing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div id="buttonChange" class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<span class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
<button wire:click.prevent="update()" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-blue-600 text-base leading-6 font-medium text-white shadow-sm hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:shadow-outline-green transition ease-in-out duration-150 sm:text-sm sm:leading-5">
Change
</button>
</span>
<span class="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto">
<button id="buttonCancel" wire:click="closeModal()" type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-base leading-6 font-medium text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition ease-in-out duration-150 sm:text-sm sm:leading-5">
Cancel
</button>
</span>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- component -->
in this way only the modal I put last opens to me.
basically I have this two buttons:
https://drive.google.com/file/d/1efqv3n3epCPdMASGqQLlGbU6yos6z_YX/view?usp=sharing
I would like this to happen if I click on edit:
https://drive.google.com/file/d/1zFfohOfU3hgmPjDzd0v-U1P_iwSwcv3h/view?usp=sharing
while if I click on edit2 it should open the livewire.edit2 modal:
ecc
now load the last loaded modal ie liviwire.edit2 no matter what you click