Creating x-jet-dialog modal and x-jet-confirmation modal not working together

Question

in my index.blade.php

<div class="flex mb-4">
        <x-jet-button wire:click="$toggle('savePositionModal')" wire:loading.attr="enabled">pAdd New Position
        </x-jet-button>
        @include('livewire.admin.manageelections.electionpositions.positionmodal')
    </div>
    <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
        <div class="p-6 px-20 bg-white border-b border-gray-200 rounded-full">
            @include('livewire.admin.manageelections.electionpositions.positionstable')
        </div>
    </div>

The Position Modal was working fine. but when the confirmation modal which is found in positions.table

 @foreach($positions as $position)
    <tr>
        <td class="border p-1">{{$count++}}</td>
        <td class="border p-1">{{$position->name}}</td>
        <td class="border p-1">{{$position->description}}</td>
        <td class="border p-1 text-center">
            <x-jet-secondary-button wire:click="openPositionModal({{$position->id}})" wire:loading.attr="enabled">
                Edit
            </x-jet-secondary-button>
            <x-jet-danger-button wire:click="$toggle('deletePositionModal')" wire:loading.attr="enabled">
                Delete
            </x-jet-danger-button>
            @include('livewire.admin.manageelections.electionpositions.deletePositonModal')
        </td>
    </tr>
@endforeach

the open Position modal is also working. but the confirmation modal (which is for Deleting purposes) is not working..

doe's anyone has any idea that might help?

Answer 1

Only one modal can be included in laravel livewire jetstream.

I recommend switching what modal to include if the user clicks a certain button.

so the default state of every modal is active or open. if ever the user click the "click-to-include-modal-button" the modal is included and then opens automatically.