Make Load More With Javascript Fetch in Laravel

Can u guys help me how to create load more with my javascript

and this is my javascript for fetch API resource

<script type="text/javascript">
  const filterProduct = document.getElementById("filterProducts");
  const domain = window.location.host
  if (filterProduct) {
    // Fetch JSON data and generate HTML
    fetch(`http://api.${domain}/v2/categories`)
      .then((response) => response.json())
      .then((data) => {
        const generateCTGameHTML = (games, targetElementId) => {
          const gameListHTML = games
            .map(
              (game) => `
                <a class="group relative transform overflow-hidden rounded-2xl bg-murky-700 duration-300 ease-in-out hover:shadow-2xl hover:ring-2 hover:ring-primary-500 hover:ring-offset-2 hover:ring-offset-murky-900" href="order/${game?.slug}" style="outline: none;">
                  <img alt="${game?.title}" width="192" height="288" class="aspect-[4/6] object-cover object-center" src="${game?.image}" style="color: transparent;">
                  <article class="absolute inset-x-0 -bottom-10 z-10 flex transform flex-col px-3 transition-all duration-300 ease-in-out group-hover:bottom-3 sm:px-4 group-hover:sm:bottom-4">
                    <h2 class="truncate text-sm font-semibold text-murky-200 sm:text-base">${game?.title}</h2>
                    <p class="truncate text-xxs text-murky-400 sm:text-xs">${game?.production}</p>
                  </article>
                  <div class="absolute inset-0 transform bg-gradient-to-t from-transparent transition-all duration-300 group-hover:from-murky-900"></div>
                </a>
              `
            )
            .join("");

          const gameListElement = document.getElementById(targetElementId);
          gameListElement.innerHTML = gameListHTML;
        };
        data.forEach(function(cat){
            generateCTGameHTML(cat.lists, cat.panel);
        });
      })
      .catch((error) => console.log("Error:", error));
  }
    // Drawer Menu
    function drawerMenu() {
      return {
          open: false,
          usedKeyboard: false,
          init() {
              this.$watch('open', value => {
                  value && this.$refs.closeButton.focus()
                  this.toggleOverlay()
              })
              this.toggleOverlay()
          },
          toggleOverlay() {
              document.body.classList[this.open ? 'add' : 'remove']('h-screen', 'overflow-hidden')
          }
      }
  }

</script>

this my html

 <div id="filterProducts">
            @foreach ($typecategories as $item)
                <div class="hidden" id="{{ preg_replace('/s+/', '', $item->name) }}panel" role="tabpanel" aria-labelledby="{{ preg_replace('/s+/', '', $item->name) }}panel-tab">
                <div id="{{ preg_replace('/s+/', '', $item->name) }}" class="grid grid-cols-3 gap-4 sm:grid-cols-4 sm:gap-x-6 sm:gap-y-8 lg:grid-cols-5 xl:grid-cols-6"></div>
                </div>
            @endforeach
          </div>

in my html code not add a button from load more because i dont know how to called in javascript system,
and i need load more form diferent panels like my json