Why is only the last like deleted and not the selected one?

Im still working on a like button this time i made with Livewire because its prettier. By lack of knowledge i patched this code together and it works partially: the likes/favorites are stored in the database and also the color of heart changes when liked also deleting functions when you have just 1 like.But when you have multiple likes and delete/unlike one of them, all of the oter likes lose their colour including the deleted one and when you refresh then only the last one is deleted and the others have their colour back and are still in the database.Can this be fixed?

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Illuminate\Support\Facades\Auth;
use App\Models\Vacature;
use App\Models\Favoriet;
use Illuminate\Contracts\View\View;
use WithPagination;

class Vacatures extends Component
{
    public $orderBy = "Sorteer: Nieuwste Vacatures";
    public $vacids = [];
    public $favoriet;
    public $updatePage = false;

    public function mount()
      {
        if(Auth::id()) {
        $user = Auth::user();
        $this->favoriet = Favoriet::where('user_id',$user->id)->get();
        foreach($this->favoriet as $this->favoriet){
          $this->vacids[] = $this->favoriet->vacature_id;
        }
      }    
    }

    public function saveFavoriet($id){
    if(Auth::id()) {
       $user = Auth::user();
       $vacature = Vacature::find($id);
       $this->favoriet = new Favoriet;
       $this->favoriet->user_id = $user->id;
       $this->favoriet->vacature_id = $vacature->id;
       $this->favoriet->vacature_naam = $vacature->naam;
       $this->favoriet->beschrijving = $vacature->beschrijving;
       $this->favoriet->save();  
       $this->updatePage = false;
       $this->mount();
    }
    else{
     return redirect('login')->with('message', 'Log in om je favorieten op te slaan, je kunt ze dan altijd terugvinden in jouw favorieten menu.');
  }
}

  public function deleteFavoriet()
   {
        $this->favoriet->delete();
        $this->updatePage = true;
   }

////

      <div class="col-lg-3 d-flex align-items-center justify-content-center">
        <div class="text-center"><a href="{{url('vacature_details',$vac->id)}}" class="buy-btn">Bekijk Vacature</a>
        </div>
      </div> 
 @if(in_array($vac->id, $this->vacids))
 @if($this->updatePage==false)
      <div>
      <a wire:click.prevent="deleteFavoriet()" class="bi bi-heart-fill fa-lg m-2" href=""
       data-tooltip="tooltip" data-placement="top" title="Is al favoriet">
      </a>
       <div>
     </div>
      </div>
      @else
      <div>
     <a wire:click.prevent="saveFavoriet({{ $vac['id'] }})" class="bi bi-heart fa-lg m-2" href="" 
       data-tooltip="tooltip" data-placement="top" title="Voeg toe aan favorieten">
      </a>
     </div>
     @endif
     @else
     <div>
     <a wire:click.prevent="saveFavoriet({{ $vac['id'] }})" class="bi bi-heart fa-lg m-2" href="" 
       data-tooltip="tooltip" data-placement="top" title="Voeg toe aan favorieten">
      </a>
     </div>
      @endif         
      <div class="border"></div>
      @endforeach 
    </div>         
    </div>  
   @endif
  </div>    
    </section>

////

I tried also with hasMany relations with user and also vacature but then all of the likes get deleted at once.

>Solution :

When you delete a favorite, you’re only deleting the last one without specifying which one to delete.

public function deleteFavoriet($vacatureId)
{
    $user = Auth::user();
    $favoriet = Favoriet::where('user_id', $user->id)
        ->where('vacature_id', $vacatureId)
        ->first();

    if ($favoriet) {
        $favoriet->delete();
    }

    // Reload the favorites
    $this->mount();
}

Update your Livewire component where you call the deleteFavoriet method:

<a wire:click.prevent="deleteFavoriet({{ $vac['id'] }})" class="bi bi-heart-fill fa-lg m-2" href=""
   data-tooltip="tooltip" data-placement="top" title="Is al favoriet">
</a>