How to show products based on each category in Laravel and JavaScript

I have Categories in my Database and The products that should be displayed once I click the buttons of each category so here is my items blade code :

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

<div  class="activities-grid">
          @foreach ($products as $product)
        <div id="test1" class="activities-grid-item " style=" background-image: url(/">
          <h1 class="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"></p>
                    <span class="price"></span>
                    ?>
                </div>
        </div>
        @endforeach

(I did the same code for every product)

and this is my JavaScript 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?

source https://stackoverflow.com/questions/68958051/how-to-show-products-based-on-each-category-in-laravel-and-javascript