How to handle form arrays crud operation?

What seems to be the problem: The problem is I can perform update, create on accordion but can’t filter out the database accordion as i want to delete the database ones which id is not same as the form ones/ delete the ones which is removed from blade.

Steps to Reproduce:

Are you using the latest version of Livewire: Yes

Do you have any screenshots or code examples:

<?php

namespace App\Http\Livewire\Pages\Editor\News;

use Livewire\Component;
use App\Models\News;
use App\Models\NewsAttachment;
use Livewire\WithFileUploads;
use App\Models\Tag;
use Illuminate\Support\Facades\Storage;
use Illuminate\Support\Arr;

class NewsEdit extends Component
{
    use WithFileUploads;
    public $news;

    public $cover_photo, $cover_title, $cover_caption;
    public $title, $description, $content, $category, $written_by, $news_source, $photo_source, $schedule, $highlight;

    public $accordions = [];
    public $photo_gallery = [];
    public $wide_gallery = [];

    public $type = '';

    public $tags = [];
    public $selectedTags = [];
    public $news_id;

    protected $rules = [
        'cover_photo' => 'required',
        'cover_title' => 'required|min:10|max:255',
        'cover_caption' => 'required|min:10|max:255',
        'title' => 'required|string|max:255',
        'description' => 'nullable',
        'content' => 'nullable',
        'category' => 'required',
        'written_by' => 'nullable',
        'news_source' => 'nullable',
        'photo_source' => 'nullable',
        'schedule' => 'nullable',
        'highlight' => 'boolean',
        'accordions.*.accordion_id' => 'nullable',
        'accordions.*.accordion_title' => 'nullable',
        'accordions.*.accordion_caption' => 'nullable',
        'photo_gallery.*.photo_image' => 'nullable',
        'photo_gallery.*.photo_title' => 'nullable',
        'photo_gallery.*.photo_caption' => 'nullable',
        'wide_gallery.*.wide_image' => 'nullable',
        'wide_gallery.*.wide_title' => 'nullable',
        'wide_gallery.*.wide_caption' => 'nullable',
        'type' => 'required',
        'selectedTags.*.id' => 'exists:tags,id'
    ];

    function mount($news)
    {

        $this->tags = Tag::all()->where('type', '=', 'news');
        $this->news = News::where('id', '=', $news)->with(['attachments', 'tags'])->first();
        $this->news_id = $this->news->id;



        $cover = $this->news->attachments->filter(function ($value, $key) {
            return data_get($value, 'cover') > 0;
        });

        foreach ($cover as $data) {
            $this->cover_photo = $data['path'];
            $this->cover_title = $data['filename'];
            $this->cover_caption = $data['caption'];
        }




        $this->title = $this->news['title'];
        $this->description = $this->news['description'];
        $this->content = $this->news['content'];
        $this->category = $this->news['category'];
        $this->written_by = $this->news['written_by'];
        $this->news_source = $this->news['article_source_from'];
        $this->photo_source = $this->news['photo_source_and_credit_to'];
        $this->schedule = $this->news['featured_publish_date'];
        $this->highlight = $this->news['highlight'];

        $attachments = collect($this->news->attachments->all());
        $existingTags = collect($this->news->tags->all());

        $accordions = $attachments->whereIn('type', 'news_accordions')->values();
        $photo_gallery = $attachments->whereIn('type', 'news_photos')->values();
        $wide_gallery = $attachments->whereIn('type', 'news_wides')->values();

        foreach ($existingTags as $tag) {
            $this->selectedTags[] = ['id' => $tag->id, 'name' => $tag->name];
        }

        foreach ($accordions as $accordion) {
            $this->accordions[] = ['accordion_id' => $accordion->id, 'accordion_title' => $accordion->filename, 'accordion_caption' => $accordion->caption];
        }

        foreach ($photo_gallery as $photo) {
            $this->photo_gallery[] = ['photo_id' => $photo->id, 'photo_image' => $photo->path, 'photo_title' => $photo->filename, 'photo_caption' => $photo->caption];
        }
        foreach ($wide_gallery as $wide) {
            $this->wide_gallery[] = ['wide_id' => $wide->id, 'wide_image' => $wide->path, 'wide_title' => $wide->filename, 'wide_caption' => $wide->caption];
        }
    }

    public function updated($propertyName)
    {
        $this->validateOnly($propertyName);
    }


    public function addTag($id, $name)
    {
        $this->selectedTags[] = ['id' => strval($id), 'name' => strval($name)];
    }

    public function removeTag($id)
    {
        unset($this->selectedTags[$id]);
        $this->selectedTags = array_values($this->selectedTags);
    }


    public function addAccordionSection()
    {
        $this->accordions[] = ['accordion_title' => '', 'accordion_caption' => ''];
    }

    public function removeAccordionSection($index)
    {
        unset($this->accordions[$index]);
        $this->accordions = array_values($this->accordions);
    }


    public function addPhotoSection()
    {
        $this->photo_gallery[] = ['photo_image' => '', 'photo_title' => '', 'photo_caption' => ''];
    }

    public function removePhotoSection($index)
    {
        unset($this->photo_gallery[$index]);
        $this->photo_gallery = array_values($this->photo_gallery);
    }


    public function addWideSection()
    {
        $this->wide_gallery[] = ['wide_image' => '', 'wide_title' => '', 'wide_caption' => ''];
    }

    public function removeWideSection($index)
    {
        unset($this->wide_gallery[$index]);
        $this->wide_gallery = array_values($this->wide_gallery);
    }







    public function update()
    {
        $this->highlight = filter_var($this->highlight, FILTER_VALIDATE_BOOLEAN);
        $validatedData = $this->validate();

        $news = News::with('tags', 'attachments')->find($this->news_id);

        $cover = $this->news->attachments->filter(function ($value, $key) {
            return data_get($value, 'cover') > 0;
        })->values()->toArray();
        // get old cover path
        $old_cover_photo = $cover[0]['path'];
        $coverData = NewsAttachment::find($cover[0]['id']);
        // checks if the existing cover_photo is same as the submitted cover_photo
        if ($validatedData['cover_photo'] == $old_cover_photo) {
            $coverData['filename'] = $this->cover_title;
            $coverData['caption'] = $this->cover_caption;
            $coverData->save();
        } else {
            // if not same store the new one and create imagePath
            $imagePath = $this->cover_photo->store('uploads/news/photos', 'public');
            $extension = $this->cover_photo->extension();
            Storage::disk('public')->delete($old_cover_photo); // delete old cover in directory
            $this->cover_photo = $imagePath;
            $coverData['path'] = $this->cover_photo; // set new cover image path
            $coverData['filename'] = $this->cover_title;
            $coverData['extension'] = $extension;
            $coverData['caption'] = $this->cover_caption;
            $coverData->save();
        }


        $existingAccordions = $this->news->attachments->whereIn('type', 'news_accordions')->values()->toArray();

        if (isset($validatedData['accordions'])) {
            // dump($existingAccordions);
            // dump($this->accordions);

            foreach ($this->accordions as $accordionIndex => $accordion) {
                if (sizeof($existingAccordions) > 0) {
                    if (Arr::exists($this->accordions[$accordionIndex], 'accordion_id')) {
                        foreach ($existingAccordions as $index => $existingAccordion) {
                            if ($existingAccordion['id'] === $accordion['accordion_id']) {
                                $attachment = NewsAttachment::find($this->accordions[$accordionIndex]['accordion_id']);
                                $attachment->filename = $this->accordions[$accordionIndex]['accordion_title'];
                                $attachment->caption = $this->accordions[$accordionIndex]['accordion_caption'];
                                $attachment->save();
                            } else {
                            }
                        }
                    } else {
                        $news->attachments()->create(['type' => 'news_accordions', 'filename' => $this->accordions[$accordionIndex]['accordion_title'], 'caption' => $this->accordions[$accordionIndex]['accordion_caption']]);
                    }
                } else {
                    $news->attachments()->create(['type' => 'news_accordions', 'filename' => $this->accordions[$accordionIndex]['accordion_title'], 'caption' => $this->accordions[$accordionIndex]['accordion_caption']]);
                }
            }
        } else {
            foreach ($existingAccordions as $existingAccordion) {
                $attachment = NewsAttachment::find($existingAccordion['id']);
                $attachment->delete();
            }
        }




        // dd($coverData['path']);

        // dd($cover[0]['id']);

        dd('no way');
        $news->title = $validatedData['title'];
        $news->content = $validatedData['content'];
        $news->description = $validatedData['description'];
        $news->category = $validatedData['category'];
        $news->written_by = $validatedData['written_by'];
        $news->article_source_from = $validatedData['news_source'];
        $news->photo_source_and_credit_to = $validatedData['photo_source'];
        $news->featured_publish_date = $validatedData['schedule'];
        $news->STATUS = $validatedData['type'];
        $news->highlight = $validatedData['highlight'];

        // remove previous tags
        foreach ($news->tags->all() as $tag) {
            $news->tags()->detach($tag['id']);
        }

        // add new selected tags
        foreach ($validatedData['selectedTags'] as $tag) {
            $news->tags()->attach($tag['id']);
        }

        $news->save();

        // dd($news);

        // $selectedTagID = array_map(function ($var) {
        //     return ($var['id']);
        // }, $this->selectedTags);


        // $existingTagID = array_map(function ($var) {
        //     return ($var['id']);
        // }, $news->tags->all());

        // $newTags = array_diff( $existingTagID, $selectedTagID);

        // dd($newTags);

    }


    public function render()
    {
        return view('livewire.pages.editor.news.news-edit')
            ->extends('layouts.auth')
            ->section('page');
    }
}