database products do not appear in my page after I click category buttons Laravel

Question

I have an issue concerning the database products . So the page has the products of the database that I have added but when I click category buttons it doesn't display any products of that category nor stop showing the previous products of the main page .

here is the categories in the blade component :

@foreach ($categories as $category)
<span id="span-{{$category->name}}" class="item"  data-name="{{$category->name}}"  onclick="btnClick(this)">{{$category->name}}</span>
 @endforeach

this is my products div section:```

<div id="test-area" class="activities-grid">

          @foreach ($products as $product)
        <!-- grid item #test1 -->
        <div id="test1" class="activities-grid-item " style=" background-image: url({{asset('image')}}/{{$product->image}}">
          <h1 id="activities-h1">
    TEST1
          </h1>
        <div class="col-md-3 col-sm-6 my-3 my-md-0">
         <div class="card-body">
              <h6 class="icons">
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="far fa-star"></i>
              </h6>

          </div>

         </div>

                       <div class="card-stuff">

                    <p class="card-text">{{$product->name}}</p>
                    <span class="price">{{$product->regular_price}}</span>
                    ?>
                </div>
        </div>
        @endforeach

(I did the same code for every product)

this is my JavaScipt code :

function btnClick(btn){
  const name = btn.getAttribute('data-name');
  const span1 = document.getElementById("span-test1");
  const span2 = document.getElementById("span-test2");
  const span3 = document.getElementById("span-test3");
  const span4 = document.getElementById("span-test4");
  const span5 = document.getElementById("span-test5");
  const span6 = document.getElementById("span-test6");
  const test1 = document.querySelectorAll('#test1');
  const test2= document.querySelectorAll('#test2');
  const test3= document.querySelectorAll('#test3');
  const test4= document.querySelectorAll('#test4');
  const test5= document.querySelectorAll('#test5');
  const test6= document.querySelectorAll('#test6');
  switch(name){
      case 'test1':
        span1.classList.add('active');
        span2.classList.remove('active');
        span3.classList.remove('active');
        span4.classList.remove('active');
        span5.classList.remove('active');
        span6.classList.remove('active');
        for (i = 0; i < test1.length; i++) {
          test1[i].style.display = "flex";
        }
        for (i = 0; i < test2.length; i++) {
          test2[i].style.display = "none";
        }
        for (i = 0; i < test3.length; i++) {
          test3[i].style.display = "none";
        }
        for (i = 0; i < test4.length; i++) {
          test4[i].style.display = "none";
        }
        for (i = 0; i < test5.length; i++) {
          test5[i].style.display = "none";
        }
        for (i = 0; i < test6.length; i++) {
          test6[i].style.display = "none";
        }
          break;

(I did the same code for every case)

So Please any idea how to fix this problem and display every product based in it category?