I want to add and delete extra participants:
<x-ta-index-main-editor-layout>
    <style>
        .ck-editor__editable {
            min-height: 320px;
            border: 1px solid #ccc;
            color: #000000 !important;
        }
        .ck-editor__editable ul{
            margin-left: .5rem;
        }
        .ck-editor__editable .todo-list{
            margin-left: 1rem;
        }
        .ck-editor__editable ol{
            margin-left: .5rem;
        }
        .list-types ul {
            list-style-type:disc !important;
            margin-left:1.5rem;
        }
        .list-types ol {
            list-style-type:decimal !important;
            margin-left:1.5rem;
        }
    </style>
    <x-slot:title>Gesprächsdetails</x-slot:title>
    <form action="{{ route('employee_appraisal_management.update', $employeeAppraisal->id) }}" method="POST" id="appraisalForm">
        @csrf
        @method('PUT')
        <x-ta-card-underlined>
            <x-slot:title>Mitarbeitergespräch mit {{ $employeeAppraisal->interviewee->name }}</x-slot:title>
            <div class="grid grid-cols-3 mb-4 gap-4">
                <div>
                    <p><strong>Gesprächsdatum:</strong> {{ \Carbon\Carbon::parse($employeeAppraisal->happened_at)->format('d.m.Y') }}</p>
                    @if(!$employeeAppraisal->happened)
                        <p><strong>Bisher nicht stattgefunden</strong></p>
                        <x-button.primary id="setHappenedButton">hat stattgefunden</x-button.primary>
                    @endif
                </div>
                <div>
                <p><strong>Interviewer:</strong> {{ $employeeAppraisal->interviewer->name }}</p>
                <p><strong>Weitere Teilnehmer:</strong>
                    @if ($employeeAppraisal->participants() && $employeeAppraisal->participants()->count() > 0)
                        {{ $employeeAppraisal->participants->user->pluck('name')->join(', ') }}
                    @else
                        Keine weiteren Teilnehmer
                    @endif
                </p>
            </div>

                <p><strong>Status:</strong> {{ $employeeAppraisal->fixed ? 'Abgeschlossen' : 'Offen' }}</p>
            </div>
            <x-ta-card-unlined class="mb-4">
                <div class="grid grid-cols-2 gap-4 mb-4">
                    {{-- Agenda Editor --}}
                    <x-widgets.base>
                        <x-slot:title>Agenda</x-slot:title>
                        @if (!$employeeAppraisal->fixed)
                            <div id="agenda-editor" class="ck-editor__editable">
                                {!! old('agenda', $employeeAppraisal->agenda) !!}
                            </div>
                            <input type="hidden" name="agenda" id="agenda-hidden" value="{{ old('agenda', $employeeAppraisal->agenda) }}">
                        @else
    	        		    <div id="agenda" class="h-80 dark:bg-black dark:text-white border border-gray-700 dark:border-gray-400 mb-4 overflow-scroll px-1 py-1 list-types">
	    	        		    {!! old('agenda', $employeeAppraisal->agenda) !!}
			                </div>
                        @endif
                    </x-widgets.base>
                    <x-widgets.base>
                        <x-slot:title>Öffentliche Interviewer-Notizen</x-slot:title>
                        @if (!$employeeAppraisal->fixed)
                            {{-- Öffentliche Interviewer-Notizen Editor --}}
                            <div id="public_interviewer_notes-editor" class="ck-editor__editable">
                                {!! old('public_interviewer_notes', $employeeAppraisal->public_interviewer_notes) !!}
                            </div>
                            <input type="hidden" name="public_interviewer_notes" id="public_interviewer_notes-hidden" value="{{ old('public_interviewer_notes', $employeeAppraisal->public_interviewer_notes) }}">
                        @else
                            <div id="public_interviewer_notes" class="h-80 dark:bg-black dark:text-white border border-gray-700 dark:border-gray-400 mb-4 px-1 py-1 list-types overflow-scroll">
                                {!! old('public_interviewer_notes', $employeeAppraisal->public_interviewer_notes) !!}
                            </div>
                        @endif
                    </x-widgets.base>
                </div>
                <x-widgets.base>
                    <x-slot:title>Private Interviewer-Notizen</x-slot:title>
                    @if (!$employeeAppraisal->fixed)
                        {{-- Private Interviewer-Notizen Editor --}}
                        <div id="private_interviewer_notes-editor" class="ck-editor__editable">
                            {!! old('private_interviewer_notes', $employeeAppraisal->private_interviewer_notes) !!}
                        </div>
                        <input type="hidden" name="private_interviewer_notes" id="private_interviewer_notes-hidden" value="{{ old('private_interviewer_notes', $employeeAppraisal->private_interviewer_notes) }}">
                    @else
                        <div id="private_interviewer_notes" class="h-80 dark:bg-black dark:text-white list-types border border-gray-700 dark:border-gray-400 px-1 py-1 mb-4 overflow-scroll">
                            {!! old('private_interviewer_notes', $employeeAppraisal->private_interviewer_notes) !!}
                        </div>
                    @endif
                </x-widgets.base>
            </x-ta-card-unlined>
            <x-widgets.base>
                <x-slot:title>Notizen des Mitarbeiters</x-slot:title>
                <div id="public_interviewee_notes" class="h-80 dark:bg-black dark:text-white border list-types border-gray-700 dark:border-gray-400 mb-4 overflow-scroll px-1 py-1">
                    {!! old('public_interviewee_notes', $employeeAppraisal->public_interviewee_notes) !!}
                </div>
            </x-widgets.base>
            <div class="mt-4">
                @if(!$employeeAppraisal->fixed)
                    <x-button.primary id="saveButton" class="me-4">Speichern</x-button.primary>
                    <x-button.primary id="setFixedButton" class="me-4">Speichern und abschließen</x-button.primary>
                @endif
                <x-button.primary-link href="{{ route('employee_appraisal_management.view') }}">Zurück zur Übersicht</x-button.primary-link>
            </div>
        </x-ta-card-underlined>

        <input type="hidden" name="happened" value="{{ old('happened', $employeeAppraisal->happened) }}">
        <input type="hidden" name="fixed" value="{{ old('fixed', $employeeAppraisal->fixed) }}">
    </form>

    <script>
        function syncEditorsToTextareas() {
            if (window.agenda) {
                document.querySelector('input[name="agenda"]').value = window.agenda.getData();
            }
            if (window.publicInterviewerNotes) {
                document.querySelector('input[name="public_interviewer_notes"]').value = window.publicInterviewerNotes.getData();
            }
            if (window.privateInterviewerNotes) {
                document.querySelector('input[name="private_interviewer_notes"]').value = window.privateInterviewerNotes.getData();
            }
        }
        
        document.getElementById('setHappenedButton').addEventListener('click', function() {
            document.querySelector('input[name="happened"]').value = 1;
            syncEditorsToTextareas();
            document.getElementById('appraisalForm').submit();
        });
        
        document.getElementById('setFixedButton').addEventListener('click', function() {
            document.querySelector('input[name="fixed"]').value = 1;
            syncEditorsToTextareas();
            document.getElementById('appraisalForm').submit();
        });
        
        document.getElementById('saveButton').addEventListener('click', function(event) {
            event.preventDefault();
            syncEditorsToTextareas();
            document.getElementById('appraisalForm').submit();
        });
    </script>
</x-ta-index-main-editor-layout>