How to delete and save info and update?

A user after login enters this page and can fill in the info in multiple dynamic forms.

In this form, a user can delete and save info and update, How to can do it?

I have three tables

public function up()
{
    Schema::create('parties', function (Blueprint $table) {
        $table->id();
        $table->foreignId('user_id')->constrained()->cascadeOnDelete();
        $table->foreignId('category_id')->constrained()->cascadeOnDelete();
        $table->timestamps();
    });
}

blade

<form action="{{ route('parties.updateAndCreate', auth()->id()) }}" method="post">
    @csrf
    @method('PUT')
    <input type="hidden" name="category_id" value="{{ $category->id }}">
    <div class="row" id="showRealPerson">

    </div>
</form>

script

<script>
    jQuery(function() {
        $(document).ready(function(){
            let count = 1;
            $('#addLegalPerson').click(function () {
                count++;
                addLegalPerson(count);
            });
            function addLegalPerson(number) {
                let html = ''+
                    '<div class="col-lg-6 mb-3">\n'+
                    '<fieldset class="border p-2">\n'+
                    '<legend class="float-none w-auto p-2 h6 fs-6 mb-0">legal_person</legend>\n'+
                    '<textarea name="parties['+number+'][legal_person]" id="legal_person" class="form-control border-0" rows="10" aria-label="legal_person"></textarea>\n'+
                    '<a class="cursor-pointer text-secondary"><i class="fa-solid fa-2x fa-trash"></i></a>\n'+
                    '</fieldset>\n'+
                    '</div>';
                $('#showRealPerson').append(html);
            }
            $('#addRealPerson').click(function () {
                count++;
                addRealPerson(count);
            });
            function addRealPerson(number) {
                let html = ''+
                    '<div class="col-lg-6 mb-3">\n'+
                    '<fieldset class="border p-2">\n'+
                    '<legend class="float-none w-auto p-2 h6 fs-6 mb-0">real_person</legend>\n'+
                    '<textarea name="parties['+number+'][real_person]" id="real_person" class="form-control border-0" rows="10" aria-label="real_person"></textarea>\n'+
                    '<a class="cursor-pointer text-secondary"><i class="fa-solid fa-2x fa-trash"></i></a>\n'+
                    '</fieldset>\n'+
                    '</div>';
                $('#showRealPerson').append(html);
            }
            showRealPerson();
            function showRealPerson() {
                let html = `@foreach($parties as $party)
                    @foreach($party->legals as $legal)
                    <div class="col-lg-6 mb-3">
                        <fieldset class="border p-2">
                            <legend class="float-none w-auto p-2 pb-0 h6 fs-6 mb-0">legal_person</legend>
                            <textarea name="parties[{{ $legal->id }}][legal_person]" id="legal_person" class="form-control border-0" rows="10" aria-label="legal_person">{{ $legal->legal_person }}</textarea>
                            <a class="cursor-pointer text-secondary"><i class="fa-solid fa-2x fa-trash"></i></a>
                        </fieldset>
                    </div>
                    @endforeach
                    @foreach($party->reals as $real)
                    <div class="col-lg-6 mb-3">
                        <fieldset class="border p-2">
                            <legend class="float-none w-auto p-2 pb-0 h6 fs-6 mb-0">real_person</legend>
                            <textarea name="parties[{{ $real->id }}][real_person]" id="real_person" class="form-control border-0" rows="10" aria-label="real_person">{{ $real->real_person }}</textarea>
                            <a class="cursor-pointer text-secondary"><i class="fa-solid fa-2x fa-trash"></i></a>
                        </fieldset>
                    </div>
                    @endforeach
                @endforeach`;
                $('#showRealPerson').append(html);
            }
            $(document).on('click', '.fa-trash', function() {
                $(this).parent().parent().parent().remove();
            });
        });
    });
</script>

web.php

Route::put('parties/updateAndCreate/{user}}', [App\Http\Controllers\PartyController::class, 'updateAndCreate'])->name('parties.updateAndCreate');

PartyController.php

public function updateAndCreate (Request $request)
{
    $parties = collect($request->input('parties'));
    $parties->each(function ($item) use ($request) {
        $party = Party::query()->create([
            'user_id' => auth()->id(),
            'category_id' => $request->input('category_id'),
        ]);
        if (isset($item['legal_person'])) {
            Legal::query()->updateOrCreate(
                ['party_id' => $party->id],
                ['legal_person' => $item['legal_person']]
            );
        }
        if (isset($item['real_person'])) {
            Real::query()->updateOrCreate(
                ['party_id' => $party->id],
                ['real_person' => $item['real_person']]
            );
        }
    });
    //Party::query()->whereNotIn('id', $parties->pluck('id'))->delete();
    return redirect()->back();
}

When I add a real_person and write for example this

real_person

And then I click on the save button. It saved.

parties table

and

reals table

And when I return to the form page,

And when I haven't added anything yet, I press the save button, it becomes two

update

This should be updated, not added

demo