Вопрос по javascript + laravel 8

У меня есть задача, есть список с людьми, у каждого из них есть SVG для добавление в избранное.

В контроллере есть метод с добавлением в избранное:

 public function addToFavorites(FavoriteTrainerRequest $request)
    {

        //get data from form
        $trainerId = $request->get('trainerId');


        //Authenticated user
        $user = auth()->user();

        //get data about favorites
        $favoriteTrainers = FavoriteTrainer::where('user_id', '=', $user->id)
            ->where('trainer_id', '=', $trainerId)
            ->first();


        //checking for data in the database
        //if empty - add
        if ($favoriteTrainers == null)
        {
            $user->favoriteTrainers()->attach($trainerId);
        }
        //if there is, delete
        else
        {
            $user->favoriteTrainers()->detach($trainerId);
        }




        return response()->json([
            вот тут мне нужно передать параметр, который будет иметь значение true/false - но что-то я вообще не понимаю как это правильно реализовать.


            ]);



    }

Делал тестовую форму с input:

    <form action="{{route('favorite')}}" method="post">
        @csrf
    <input type="text" name="trainerId" placeholder="Избранное"><br><br>
        <input type="submit" value="тык">
        @if($errors->any())
                <div>
                    <ul>
                        @foreach($errors->all() as $error)
                            <li>
                                {{$error}}
                            </li>
                        @endforeach
                    </ul>
                </div>
        @endif

    </form>

т.е,в форму добавляешь id в форму и он сразу уходит в pivot-таблицу. добавляешь снова - удаляется.

Потом, мне нужно было, чтобы при клике на svg происходило то же самое, только с подключением js.

вот вьюха:

            <div class="w-2/3 ml-5 flex flex-col justify-center items-center" id="trainers-block" data-add-trainer-to-favorite-list-url="{{route('favorite')}}">

                @foreach($trainers as $trainer)
                    <div class="flex items-center mt-5">
                        <span class="text-green-gym border-2 px-4 py-3.5 text-center"><span class="text-3xl">{{$trainer->trainer_points}}</span> <br> баллов</span>
                        <div class="text-sm border-2 py-3 ml-2 pl-10 w-widtable">
                            <div>
                                <div class="flex justify-between">
                                    <h4 class="text-base uppercase"><a href="{{route('trainer.show',['trainer' => $trainer->slug])}}">{{$trainer->surname.' '.$trainer->name}}</a></h4>
                                    <span class="pr-2 favorite-trainer-flag">
                                        <svg xmlns="http://www.w3.org/2000/svg" data-trainer-id="{{$trainer->id}}" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path></svg>

                                    </span>
                                </div>

вот js - совсем новое для меня, но я пытался:

        document.addEventListener("DOMContentLoaded", function() {

            let addToFavoriteListButtons = document.querySelectorAll('.favorite-trainer-flag')

            addToFavoriteListButtons.forEach(function(element) {
                element.addEventListener('click', async function (event) {
                    const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

                    let clickedButton = event.target
                    let trainerId = clickedButton.dataset.trainerId



                    let trainersBlock = document.getElementById('trainers-block')
                    let addTrainerToFavoriteListUrl = trainersBlock.dataset.addTrainerToFavoriteListUrl



                    try {
                        const response = await fetch(addTrainerToFavoriteListUrl, {
                            method:'POST',
                            headers: {
                                'X-CSRF-TOKEN': token
                            },
                            body: {
                                trainerId:trainerId
                            }
                        })
                        if(response.status == 200){
                            const responseData = await response.json();
                        } else {
                            alert('Что-то пошло не так. Перезагрузите страницу и попробуйте еще раз');
                        }


                    } catch (error) {
                        console.log(error);
                        alert('Что-то пошло не так. Перезагрузите страницу и попробуйте еще раз');
                    }



                })
            })
         });

Но в итоге, fetch - запрос не работает так как нужно, поэтому большая просьба к гуру, ребят помогите/ подскажите/ направьте, сижу уже 3ий день с этой байдой - решить не могу.

Я новичок во всем этом, но очень стараюсь разобраться :)