やりたいこと

WordPressで投稿一覧から詳細ページをモーダル展開＋スライドさせたい

起きている問題

モーダルの中身が必ず一番新しい投稿になってしまってクリックした内容が表示されません。

single-**.phpを使わずにswiperとJSの組み合わせでモーダル＋スライドさせたいのですが挙動がうまくいきません。
なお、モーダルは問題なく開ける＆スライドも動作しています。

問題箇所の予想

モーダルを開いた時に展開されるのが最新投稿になってしまっているので
data-slide-index=”<?php the_ID(); ?>”の部分はおかしいのかと思うのですがどうにもできず。

どなたかご教示いただけませんでしょうか。
なお、swiperはCDNで読み込みしております。

<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

【php実装内容】

一覧部分

<ul class="swiperModalButton">
<?php
    $args = [
    'post_type' => 'achievement', // カスタム投稿名
    'posts_per_page' => 30, // 表示させる数
    'paged' => $paged,
    ];
    $my_query = new WP_Query($args); ?>
    <?php if ($my_query->have_posts()): ?>
    <?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
    <li class="modalOpen" data-slide-index="<?php the_ID(); ?>">
            <?php if(has_post_thumbnail()): ?>
            <img src="<?php the_post_thumbnail_url(''); ?>">
            <?php endif; ?>
            <h3><?php the_title(); ?></h3>
    </li>
    <?php endwhile; ?>
    <?php else: ?>
<?php endif; wp_reset_postdata(); ?>  
</ul>

モーダル中身

<div class="modal" id="modal">
<div class="modal__overlay modalClose"></div>
<div class="modal__content">
    <div class="modal_inner">
        <div class="modal__close-btn modalClose" aria-label="閉じる"><i class="fa-regular fa-circle-xmark"></i></div>
        <!-- スライダー -->
        <div class="swiper modalInSlider">
            <ul class="swiper-wrapper">
                <?php
                    $args = [
                    'post_type' => 'achievement',
                    'posts_per_page' =>100,
                    ];
                    $my_query = new WP_Query($args); ?>
                    <?php if ($my_query->have_posts()): ?>
                    <?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
                <li class="swiper-slide modalInSlider">
                <?php if( get_field('***') ): ?>
                    <img src="<?php the_field('***'); ?>" />
                <?php endif; ?>
                </li>
                    <?php endwhile; ?>
                    <?php else: ?>
                    <?php endif; wp_reset_postdata(); ?>
            </ul>
        </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

【JS実装内容】

//modal
window.addEventListener("DOMContentLoaded", () => {
  // モーダルを取得
  const modal = document.getElementById("modal");
  // モーダルを開く
  const openModalBtns = document.querySelectorAll(".modalOpen");
  // モーダルを閉じる
  const closeModalBtns = document.querySelectorAll(".modalClose");

  // モーダルのボタンクリック
  openModalBtns.forEach((openModalBtn) => {
    openModalBtn.addEventListener("click", () => {
      // data-modalで設定したスライド番号を取得
      const modalIndex = openModalBtn.dataset.slideIndex;
      swiper.slideTo(modalIndex);
      modal.classList.add("is-active");
    });
  });

  // モーダルの閉じるボタンクリック
  closeModalBtns.forEach((closeModalBtn) => {
    closeModalBtn.addEventListener("click", () => {
      modal.classList.remove("is-active");
    });
  });

   // Swiperの設定
   const swiper = new Swiper(".swiper", {
    loop: true,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    spaceBetween: 30, //任意のマージン
  });

});

参照した参考記事はこちら：
素のJSとSwiperでモーダル内にスライダーを表示する方法
 JavaScriptのSwiperをモーダルでスライダー・カルーセル表示

よろしくお願いいたします。