Laravel: Add to favourites button is duplicating because of foreach loop - php

Question

For a project, I've created a method where people can add products they want to buy to a wishlist. All items in the catalog are stored and each article has a hearticon that is clickable. Once it's clicked, it's added to my database.
However, when an article is added to favourites, the icon turns red but the original transparant icon is still there. So articles whom are added to favourites all have a filled and a transparant icon, which is not how it should be done.
Here is my code:
My View:
<div class="flex flex-col justify-evenly items-center lg:flex-row flex-wrap justify-between gap-y-20 gap-x-2 lg:p-20 lg:w-12/12">
#foreach ($articles as $article)
<div class="w-8/12 lg:w-3/12 flex flex-col justify-between xl:h-100">
<form action="{{route('wishlist.store', $article->id)}}" id="wish_form" method="post">
{{csrf_field()}}
<input name="user_id" type="hidden" value="{{Auth::user()->id}}" />
<input name="article_id" type="hidden" value="{{$article->id}}" />
<button type="submit" class=""><img src="{{ 'icons/0heart.png' }}" alt="" width="25" onclick="this.form.submit()" id="emptyHeart"></button>
#foreach ($wishlists as $wishlist)
#if ($wishlist->article_id === $article->id )
<button type="submit"><img src="{{ 'icons/1heart.png' }}" alt="" width="25" onclick="this.form.submit()" id="checked"></button>
#endif
#endforeach
</form>
<div class="h-2/3 xl:h-1/3 flex justify-center items-center">
{{-- <img src="{{$article->image}}" alt="" class="h-40"> --}}
</div>
<div class="h-20 mt-2">
<h4 class="text-md text-center flex"><strong>{{ $article->title }}</strong></h4>
</div>
<div class="flex flex-row flex-wrap justify-between items-center mt-4">
<p class="p-2">{{$article->prijs}}</p>
<p>Beschikbaar via {{$article->website->title}}</p>
</div>
</div>
#endforeach
</div>
My controller:
class FilterController extends Controller
{
public function catalogus(Request $r)
{
$articles = Article::all();
$categories = Category::all();
$websites = Website::all();
$wishlists = Wishlist::all()->where('user_id',auth()->user()->id);
$list = Wishlist::all()->where('article_id', $articles->id);
dd($list);
return view('catalogus', compact('articles', 'categories', 'websites', 'wishlists', 'list'));
}
}
My model:
class Wishlist extends Model
{
protected $table = "wishlists";
protected $fillable = [
'user_id',
'article_id',
'confirmed',
'available'
];
protected $casts = [
];
public function user()
{
return $this->belongsTo(User::class);
}
public function article()
{
return $this->belongsTo(Article::class);
}

Answer 1

You can use contains() collection method
<form action="{{route('wishlist.store', $article->id)}}" id="wish_form" method="post">
{{csrf_field()}}
<input name="user_id" type="hidden" value="{{Auth::user()->id}}"/>
<input name="article_id" type="hidden" value="{{$article->id}}"/>
#if ($wishlists->contains('article_id', $article->id))
<button type="submit">
<img src="{{ 'icons/1heart.png' }}" alt="" width="25"
onclick="this.form.submit()" id="checked">
</button>
#else
<button type="submit" class="">
<img src="{{ 'icons/0heart.png' }}" alt="" width="25"
onclick="this.form.submit()" id="emptyHeart" />
</button>
#endif
</form>