AJax blog load more

<div class="blog-articles-tag">
  <div class="blog-articles blog-posts">
     <div id="blogGallery" class="blog-gallery group_handle gallery">
       {% paginate blog.articles by 50 %}
           <p> {{ blog.articles.size }}</p>

         {% for post in blog.articles %}
           <div {{ forloop.index }}  data-handle="{{ post.tags }}" class="{% if post.tags contains 'Werke im quadratischen Format' %} gallery_2{% endif %}{% if post.tags contains 'Werke im Querformat' %} gallery_3{% endif %}">
             <div data-handle="{{ post.handle }}" class="swiper-slide blog-post-image blog-post blog-articles__article article" data-tags="{{ post.tags | join: ',' }}">
               <img src="{{ post.image | img_url: 'master' }}" alt="{{ post.title }}">
               {% assign related_products = post.metafields.custom.products_motif %}
               {% if related_products %}
                 <div class="popup-click" data-title="{{ post.title | handle }}">
                   {{ 'icon-plus.svg' | inline_asset_content }}
                 </div>
               {% endif %}
             </div>
           </div>
         {% endfor %}
       {% assign max_pages = paginate.pages %}

       {% endpaginate %}
     </div>

{% if blog.articles_count > 50 %}
 <div class="text-center" style="margin-top: 2rem;">
   <button id="loadMoreBtn"
           data-current-page="1"
           data-max-pages="{{ max_pages }}"
           data-blog="{{ blog.handle }}" class="button button--primary">
     Mehr anzeigen
   </button>
 </div>
{% endif %}
</div>
main.js
jQuery(document).ready(function($) {
  const $loadMoreBtn = $('#loadMoreBtn');
  if (!$loadMoreBtn.length) return;

  let loading = false;
  let currentPage = parseInt($loadMoreBtn.data('current-page'));
  const maxPages = parseInt($loadMoreBtn.data('max-pages'));
  const blogHandle = $loadMoreBtn.data('blog');
  const $gallery = $('#blogGallery');

  $loadMoreBtn.on('click', function() {
    if (loading || currentPage >= maxPages) return;

    loading = true;
    currentPage++;

    $.ajax({
      url: `/blogs/${blogHandle}?page=${currentPage}&view=ajax`,
      method: 'GET',
      success: function(data) {
        const $data = $(data);
        const $newPosts = $data.find('#blogGallery').html();

        if ($newPosts && $newPosts.trim() !== '') {
          $gallery.append($newPosts);
        }

        if (currentPage >= maxPages || !$newPosts || $newPosts.trim() === '') {
          $loadMoreBtn.hide();
        }

        loading = false;
      },
      error: function() {
        console.error('Error loading more posts.');
        loading = false;
      }
    });
  });
});

template
blog.ajax.liquid

<div id="blogGallery">
  {% paginate blog.articles by 50 %}
    {% for post in blog.articles %}
      <div data-handle="{{ post.tags }}" class="{% if post.tags contains 'Werke im quadratischen Format' %} gallery_2{% endif %}{% if post.tags contains 'Werke im Querformat' %} gallery_3{% endif %}">
        <div data-handle="{{ post.handle }}" class="swiper-slide blog-post-image blog-post blog-articles__article article" data-tags="{{ post.tags | join: ',' }}">
          <img src="{{ post.image | img_url: 'master' }}" alt="{{ post.title }}">
          {% assign related_products = post.metafields.custom.products_motif %}
          {% if related_products %}
            <div class="popup-click" data-title="{{ post.title | handle }}">
              {{ 'icon-plus.svg' | inline_asset_content }}
            </div>
          {% endif %}
        </div>
      </div>
    {% endfor %}
  {% endpaginate %}
</div>