Ajax запрос на отображение на одной странице товаров на основе выбранной подкатегории, laravel 6

Question

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

Я отображаю в виде ссылок все подкатегории из родительской категории и все продукты, связанные с этими подкатегориями, теперь мне нужно если я нажму на определенную подкатегорию на той же странице с ajax, чтобы отобразить только продукты из этой подкатегории. Я довольно новичок в javascript или jquery, и, если возможно, мне понадобится некоторая помощь.

Итак, это мой контроллер:

    public function product_list(Categorie $categorie)
{

    $categorie = $categorie->load('subcategory');

    $parent_equip_groups = $categorie->parent_equip_groups()->paginate();

    $default_theme = Config::get('default_theme') ?? 'creative01';
    return view('categorie::frontend.' . $default_theme . '.product_category',
    compact('categorie', 'parent_equip_groups'));
}

    public function equipGroupFilter(Categorie $categorie)
{
    $filtered = $categorie->equip_groups;
    return response()->json($filtered);
}

Категории модели

    public function equip_groups()
{
    return $this->hasMany(EquipGroup::class, 'categorie_id');
}
    public function parent_equip_groups()
{
    return $this->hasManyThrough(EquipGroup::class, Categorie::class, 'parent_id', 'categorie_id');
}

    public function subcategory()
{
    return $this->hasMany(Categorie::class, 'parent_id');
}

Модель продукта

    public function categories()
{
    return $this->belongsTo(Categorie::class, 'categorie_id');
}

Файл моих маршрутов

Route::get('subcategory/{categorie}', 'CategorieFrontEndController@equipGroupFilter')->name('subcategory');
Route::get('categorii/{categorie}', 'CategorieFrontEndController@product_list')->name('categories');

Файл My Blade

            <!--Features-->
        <section class="row features margin">
            <div class="container">
                @if($categorie)
                    @foreach($categorie->subcategory as $cat)

                        <div class="col-md-3" style="margin-top: 2rem;">
                            <div class="media">
                                <a href="{{ route('subcategory', $cat) }}" id="subcategory" name="{{$cat->id}}">
                                    <div class="media-left text-center">
                                    <span>
                                        @if($cat->photos)
                                            @foreach($cat->photos as $photo)
                                                <img style="width: 60px; height: 60px; border-radius: 10px" src="{{ asset('storage/images/Categorie/' . $photo->name) }}">
                                            @endforeach
                                        @endif
                                    </span>
                                    </div>
                                    <div style="white-space: nowrap; width: 10em; overflow: hidden; text-overflow: ellipsis; color: #F77D0A;" class="media-body">
                                        <h4 class="this-title">{{ $cat->title }}</h4>
                                        <p>{!! $cat->description !!} </p>
                                    </div>
                                </a>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
        </section>

<section class="row fleets2">
    <div class="container">
        <div class="row">
            @if($parent_equip_groups)
                @foreach($parent_equip_groups as $product)
                    <div class="col-md-4 fleet fleet2 sale-offer">
                        <div class="inner row">
                            <h2 class="rent text-center"><small>From</small>
                                @if ($product->prices->first()->price_per_day)
                                    {{ $product->prices->first()->price_per_day }} / zi
                                @elseif ($product->prices->first()->price_per_hour)
                                    {{ $product->prices->first()->price_per_hour }} / ora
                                @endif</h2>
                            <h6 class="reviews text-center">
                            </h6>
                            <h4 class="vehicle-title text-center">{{$product->name}}</h4>
                            <div class="row vehicle-img text-center">
                                @if($product->photos)
                                    @foreach($product->photos as $photo)
                                        <img src="{{ asset('storage/images/EquipGroup/' . $photo->name) }}" alt="">
                                    @endforeach
                                @endif
                            </div>
                            <div class="row specification">
                                <a href="{{ route('produse', $product->id) }}" class="details-page">+</a>
                            </div>
                        </div>
                    </div>
                @endforeach
            @endif
        </div>
    </div>
</section>

И моя попытка ajax позвонить

    jQuery(document).ready(function ($) {
        $('#subcategory').on('click', function () {
            var active = $(this).find(":active").attr('name');
            $.ajax({
                url: base_url + '/subcategory/'+active,
                type: 'GET',
                dataType: 'json',

            }).done(function (data) {

                var active = $('#subcategory');
                $.each(data,function(key, name) {
                    a.append('<href =' + key.id + '>' + name.name + '/>');
                });
                console.log("success");
            })
        });
    });