Wordpress как добавить к каждой карточке товара модальное окно?

Проблема заключается в том, что есть сайт на Wordpress, в котором есть карточки товаров. Данные карточки добавляются администратором сайта из CMS. При этом установлен один плагин ACF.

Задача состоит в том чтобы при нажатии на карточку открывалось модальное окно с расширенной информацией о товаре. Модальное окно прикрутить удалось, но при нажатии на любую карточку выводится информация о первой карточке. Как можно решить проблему, что-бы при нажатии на каждую карточку отрывалось модальное окно с информацией которая будет соответствовать данной карточке?

HTML

<section class="catalog " style="background: <?php the_field('background-all-hex') ?>" id="2">
    <h1 class="section-name"><?php the_field('first_name_section') ?></h1>
    <div class="container">
        <div class="row">
            <div class="catalog__items col-12">
                <?php                           

$posts = get_posts( array(
    'numberposts' => -1,
    'category'    => 0,
    'orderby'     => 'date',
    'order'       => 'ASC',
    'include'     => array(),
    'exclude'     => array(),
    'meta_key'    => '',
    'meta_value'  =>'',
    'post_type'   => 'cards',
    'suppress_filters' => true,
) );
    foreach( $posts as $post ){
    setup_postdata($post);
   ?>
                <div class="catalog__item col-xl-3 col-md-4 col-sm-8 wow fadeInUp" data-wow-duration="0.35s"
                    data-wow-delay="0.15s">
                    <img class="catalog__item__logo" src="<?php echo get_the_post_thumbnail_url(); ?>"
                        alt="image">
                    <p class="catalog__item__name"><?php the_title() ?></p>
                    <p class="catalog__item__description"><?php the_field('description') ?></p>
                    <img class="catalog__item__img" src="<?php the_field('imgdown') ?>"
                        alt="image">
                    <div class="catalog__item__fon-hover">
                        <a class="myBtn" ><img class="catalog__item__button-hover"
                                src="<?php echo get_template_directory_uri()?>/assets/img/finger.png"
                                alt="button"></a>
                    </div>
                </div>
                
                <!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div  class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2><?php the_title() ?></h2>
    </div>
    <div class="modal-body">
      <p>Text</p>
      <p>Some other text...</p>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

                <?php } wp_reset_postdata(); ?>
            </div>
        </div>
    </div>

JS

// Get the modal
var modal = document.getElementById("myModal");


// Get the button that opens the modal
var btn = document.querySelectorAll('.myBtn');
for (var i = 0; i < btn.length; ++i) {
    btn[i].addEventListener('click', function(e) {
        modal.style.display = "block";
    });
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}