Add Popup Ajax

add article.ajax.liquid // action 

 <div class="load-data-blog-content">
  <div class="load-data-blog-inner">
        <div class="load-data-left">
             <img src="{{ article.image | img_url: 'master' }}" alt="Featured Image" />
        </div>
       <div class="load-data-right">
         <div class="load-data-inner"> 
           {% if article.metafields.custom.sub_heading %}
          <p class="event-subheading subtitle">
            {{ article.metafields.custom.sub_heading.value }}
          </p>
        {% endif %}
        <h2>
            {{ article.title | truncate: 50 | escape }}
        </h2>
         <div class="article-content">
             {{ article.content }}
         </div>
     {% if article.metafields.custom.products_motif %}
       <div class="motiv-custom">
       <h5>Produkte mit diesem Motiv</h5>
         <!-- Flickity CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flickity@2/dist/flickity.min.css">

    <div class="custom-product carousel"
         data-flickity='{
           "cellAlign": "left",
           "contain": true,
           "pageDots": true,
           "prevNextButtons": false,
           "wrapAround": true,
           "groupCells": true
         }'>
  
      {% for product in article.metafields.custom.products_motif.value %}
        <div class="carousel-cell custom-product-slide">
          <div class="product-wrapper">
            {% render 'card-product',
              card_product: product,
              media_aspect_ratio: 'adapt',
              section_id: 'custom'
            %}
          </div>
        </div>
      {% endfor %}
  
    </div>

  <!-- Flickity JS -->
  <script src="https://cdn.jsdelivr.net/npm/flickity@2/dist/flickity.pkgd.min.js"></script>
         </div>
{% endif %}
      </div>
        </div>
  </div>
</div>

//main.js 

/** CUSTOM ***/

// var handles = []; // Store all blog post handles
// $('.blog-post-image').each(function() {
//     handles.push($(this).data('handle'));
// });

var swiper; // Global swiper variable

$('.blog-post-image').click(function() {
   var $this = $(this);  
    var $parentGroup = $this.closest('.group_handle'); 

    var handles = []; // Store blog handles within the specific group
    $parentGroup.find('.blog-post-image').each(function() {
        handles.push($(this).data('handle'));
    });  
    console.log(handles);
    var clickedHandle = $(this).data('handle');
    var clickedIndex = handles.indexOf(clickedHandle);
    $('#post-popup').fadeIn();
    if (!swiper) {
        swiper = new Swiper('.popup-swiper', {
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            on: {
                slideChange: function() {
                    var index = swiper.realIndex;
                    //console.log(index);
                   loadPostContent(handles[index], index);
                }
            }
        });
        handles.forEach(function() {
            swiper.appendSlide('<div class="swiper-slide swiper-slide-custom"><div class="popup-content-inner"></div></div>');
        });
    }

    swiper.slideTo(clickedIndex, 0); 
    loadPostContent(clickedHandle, clickedIndex);
});

// Close popup
$('#close-popup').click(function() {
    $('#post-popup').fadeOut();
});

// Close popup if clicked outside
$(window).click(function(event) {
    if ($(event.target).is('#post-popup')) {
        $('#post-popup').fadeOut();
    }
});

// Function to load blog post content into the slide
function loadPostContent(handle, index) {
    var slide = $('.popup-swiper .swiper-slide').eq(index).find('.popup-content-inner');
    if (slide.data('loaded')) {
        return;
    }
    var url = '/blogs/' + handle+ '?view=ajax';

    $.ajax({
        url: url,
        method: 'GET',
        success: function(response) {
            var postContent = $(response).find('.load-data-blog-content').html();
             
           slide.html(postContent || "No Content Available");
           slide.data('loaded', true); // mark as loaded
        },
    });
}
  /** CUSTOM ***/

 // liquid 

  <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 }}">
                              {% if related_products %}
                              <div class="popup-click"
                                data-title="{{ post.title | handle }}">
                                {{ 'icon-plus.svg' | inline_asset_content }}
                              </div>
                          {% endif %}
                        </div>