Есть ли способ, где при нажатии на категорию, элементы этой конкретной категории будут отображаться?

Question

Я пытался классифицировать элементы так, чтобы у каждого элемента была своя категория, и они будут отображаться после щелчка по этой конкретной категории. Есть ли способ сделать это?

Ниже изображение показывает точный вывод, что мне действительно нужно.

Я получаюкатегория, а также элементы из базы данных. Я использовал PHP и Laravel здесь. Я использовал ID как для категории, так и для таблицы элементов, а также category_id в таблицах элементов.

Ниже приведен код для получения названий категорий.

<div class="">
   <ul class="nav bg radius nav-pills nav-fill mb-3 bg" role="tablist">
       @foreach($itemCategories as $itemCategory)
          <li class="nav-item">
             <a class="nav-link show" data-toggle="pill" href="#">
             <i class="fa fa-tags" aria-hidden="true"></i> {{ $itemCategory->name }} </a>
          </li>
       @endforeach
    </ul>
</div>

И вот как у меняизвлек элементы под ним.

<div class="row" style="padding: 30px;">
       @foreach ($items as $item)
            <div class="col-md-2" >
              <figure class="card card-product boxshadow" >
                <div class="img-wrap text-center">
                  </br><img src="{{substr(url("/"), 0, strrpos(url("/"), '/'))}}{{ $item->image }}" alt="{{ $item->name }}" height="80%" width="80%" style="border-radius: 0.275rem; ">
                </div>
                <figcaption class="info-wrap text-center">
                    <h4 class=""> {{ $item -> name }}</h4>
                    <div class="action-wrap">
                    <div class="price-wrap h5 text-center">
                            <span class="price-new">{{ config('settings.currencyFormat') }} {{ $item->price }} </span>
                        </div>
                    <div class="" style="padding: 5px;">
                      <a href="#" class="btn btn-primary btn-sm  my-cart-btn btn-block text-center" data-id="{{ $item->id }}" data-name="{{ $item->name }}" data-price="{{ $item->price }}" data-quantity="1" data-image="{{substr(url("/"), 0, strrpos(url("/"), '/'))}}{{ $item->image }}"> <i class="icon-cart-add"></i> Add</a>
                    </div>
                  </div>
                </figcaption>
                </figure>
            </div>
       @endforeach
</div>

Вот маршрут ->
Route::get('/pos', 'RestaurantOwnerController@pos')->name('restaurant.pos');

А вот код контроллера ->

public function pos()
    {
        $user = Auth::user();

        $items = Item::whereIn('restaurant_id', $restaurantIds)
            ->orderBy('id', 'DESC')
            ->paginate(20);

        $displayUsers = User::all();

        $displayItemCategory = ItemCategory::all();


        return view('restaurantowner.pos', array(
            'items' => $items,
            'users' => $displayUsers,
            'itemCategories' => $displayItemCategory,
        ));
    }  

Будет очень полезно, если объяснить с помощью примера при нажатии на категорию, будут найдены элементы для этой категории.