How to properly nest modal component?

I have a problem. I'm trying to create a modal window for reporting that dynamically serves both reporting comments and posts, so that it's not necessary to create multiple modal windows. I've created a single component for reports that will serve both types of reports, but I'm struggling with ensuring that only one modal window opens for the given type, either for a post or for a comment. Currently, both modal windows open simultaneously – when I submit one, the other also opens. I can report both a post and a comment in the same view. However, I want the modal window to open only for the specific type. I've even tried creating two modal windows with different actions, but that didn't help either. Regarding saving data to the database, that works fine. The issue is not related to that. I'm more concerned about the frontend process of how to open the modal window separately for each component based on what the user clicks, rather than both windows opening at once. Thank you for your assistance.

This is my reports.blade.php component where is modal with functionality.

<?php

use Livewire\Volt\Component;
use App\Models\Post;
use App\Models\Report;
use Mary\Traits\Toast;
use Illuminate\Database\Eloquent\Model;

new class extends Component {
    use Toast;
    protected $listeners = ['openReportModal'];

    public Model $model;
    public $reportableType;
    public $reportableId;

    public bool $report_modal = false;
    public array $selectedReports = [];

    public function mount(Model $model): void
    {
        $this->model = $model;
        $this->reportable_type = $model->reportable_type;
        $this->reportable_id = $model->reportable_id;
    }

    public function openReportModal($params)
    {
        $this->reportable_id = $params['id'];
        $this->reportable_type = $params['type'];
        $this->report_modal = true;
    }

    public function reportTypes()
    {
        $reportTypes = [
            'Spam' => 'Spam',
            'Nepřístojný' => 'Nepřístojný obsah',
            'Urážlivý' => 'Urážlivý',
            'Jiné' => 'Jiné',
        ];
        return $reportTypes;
    }
    public function report(): void
    {
        if (auth()->check()) {
            $selectedReports = $this->selectedReports;

            if (empty($selectedReports)) {
                $this->error('Vyberte prosím alespoň jeden typ reportu.');
                return;
            }

            $reportData = [
                'user_id' => auth()->user()->id,
                'reportable_id' => $this->model->id,
                'reportable_type' => class_basename($this->model),
            ];

            foreach ($selectedReports as $reportType) {
                switch ($reportType) {
                    case 'Spam':
                        $reportData['spam'] = true;
                        break;
                    case 'Nepřístojný':
                        $reportData['inappropriate'] = true;
                        break;
                    case 'Urážlivý':
                        $reportData['offensive'] = true;
                        break;
                    case 'Jiné':
                        $reportData['other'] = true;
                        break;
                }
            }

            $report = new Report($reportData);
            $report->save();
            $this->reset(['report_modal', 'selectedReports']);

            $objectType = $this->model instanceof Post ? 'Příspěvek' : 'Komentář';
            $this->success("$objectType byl nahlášen.");
        }
    }
}; ?>

<div>
    <x-modal wire:model="report_modal" title="Nahlášení" subtitle="Pokud je komentář nevhodný, můžete ho zde nahlásit"
        separator>
        <form wire:submit.prevent="report">
            @foreach ($this->reportTypes() as $key => $reportType)
                <div class="flex items-center justify-left mb-2">
                    <input type="checkbox" id="{{ $key }}" wire:model="selectedReports" value="{{ $key }}"
                        class="mr-2">
                    <label for="{{ $key }}">{{ $reportType }}</label>
                </div>
            @endforeach
            <x-slot name="actions">
                <x-button label="Cancel" @click="$wire.report_modal = false" />
                <x-button label="Confirm" @click="$wire.report" class="btn-primary" type="submit" />
            </x-slot>
        </form>
    </x-modal>


</div>

This is card of comments where i call the modal

public function openReportModal(){
        $this->dispatch('openReportModal', ['id' => $this->comment->id, 'type' => get_class($this->comment)]);

    }

<x-slot:menu>
            <x-dropdown right>
                <x-slot name="trigger">
                    <x-button icon="o-ellipsis-vertical" class="btn-sm btn-ghost btn-circle" />
                </x-slot>
                @if (auth()->check())
                    <x-menu-item title="Nahlásit" icon="m-shield-exclamation" @click="$wire.openReportModal"
                        class="text-error" />
                @endif
                @if ($comment->author->isMyself())
                    <x-menu-item title="Editace" icon="o-pencil" @click="$wire.editing = true" />
                    <x-menu-item title="Smazat" icon="o-trash" wire:click="delete({{ $comment->id }})"
                        class="text-error" />
                @endif
            </x-dropdown>

        </x-slot:menu>

        <livewire:reports.reports :model="$comment" :reportable_type="$comment->reportable_type" :reportable_id="$comment->reportable_id"/>

This is post show component where I call reports aswell.

 public function openReportModal(){
        $this->dispatch('openReportModal', ['id' => $this->post->id, 'type' => 'Post']);
    }

@if($post->author->isMyself())
            <div>
                @if(! $post->archived_at)
                    <x-button label="Archivovat" wire:click="archive" icon="o-archive-box" class="btn-sm btn-ghost" />
                    <x-button label="Editace" link="/posts/{{ $post->id }}/edit" icon="o-pencil" class="btn-sm btn-ghost" />
                    <x-button label="Nahlásit" icon="m-shield-exclamation" @click="$wire.openReportModal" class="btn-sm btn-error" />

                    <x-button label="Smazat" wire:click="delete({{ $post->id }})" icon="o-trash" class="btn-sm btn-error " />
                    @else
                    <x-button label="Unarchive" wire:click="unarchive" icon="o-archive-box" class="btn-sm btn-ghost" />
                @endif
            </div>
        @endif

    <livewire:reports.reports :model="$post" :reportable_type="$post->reportable_type" :reportable_id="$post->reportable_id"/>

I don't even remember everything I tried, but what I want is to have a single dynamic modal window for multiple models. However, when I'm on a web page and I have one post and two comments, the modal window opens three times... for each object, it seems.

Solution: It looks like the modal component's visibility is handled by x-data="{open: @entangle($attributes->wire('model')).live }" on line 34.

In your implementation, $report_modal is the value being used for $attributes->wire('model') (wire:model="report_modal"). $report_modal is being set to true on all modals because they're all listening to the same browser event (openReportModal).

You could add a check to the openReportModal() listener function to ensure the type being passed in the event matches the type of that component instance (rather than a generic $this->report_modal = true)