Как отобразить определенный контент из поста в Bootstrap 4 Modal, WordPress

Я искал этот ответ, я пробовал много вещей, но он все еще не работает …
Здесь ниже я дам вам код. Пожалуйста, я буду так благодарен человеку, который мне поможет. Благодарю вас.

Я постараюсь объяснить вам, что я сделал. По сути, я связал идентификатор поста с модальным окном, чтобы отобразить конкретный контент поста в конкретном модальном окне. Кажется, это может сработать, но нет. Я понял, что ссылка модального идентификатора не меняется, пока ссылка меняется … Я не знаю, что делать …
Здесь ниже я дам вам скриншот.
Извините, если я ошибся, объясняя вам все это .. 🙂

PHP-код:

    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 align-self-start">
<div class="client-opinion-box text-center">
<p class="client-opinion-box-txt text-center"><?php the_excerpt(); ?></p>
*** <a class="btn btn-primary" id="clickme" data-toggle="modal" data-id="<?php the_ID(); ?>" href="#myModal-<?php the_ID(); ?>">читать полностью&gt;&gt;
</a> ***
<h4 class="client-opinion-box-sub_header"><?php the_title(); ?></h4>
</div>
</div>

<?php
}

wp_reset_postdata(); // сброс

?>

</div>
<div class="row justify-content-center">
<button id="opinion-btn" class="main-button opinion-btn btn btn-primary" type="button" data-toggle="collapse" data-target="#collapsed-opinion-leave" aria-expanded="false" aria-controls="collapsed-opinion-leave">Добавить отзыв</button>
</div>
<div class="row opinion-leave-box collapse" id="collapsed-opinion-leave">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">


<h3 class="opinion-leave-box-header">Оставьте свой отзыв</h3>
<?php

echo do_shortcode('[contact-form-7 id="144" title="Контактная форма (ОТЗЫВЫ)"]');

?>

</div>
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 opinion-alignment">
<img src="/wp-content/themes/Rodoslov-theme/assets/img/Opinions/family-tree-opinion.png" class="img-responsive opinion-leave-img" alt="Family Tree">
</div>
</div>
</div>
</section>

<!-- Modal Bootstrap -->
<!-- Modal -->
*** <div class="modal fade" id="myModal-<?php the_ID(); ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> ***
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle"><?php the_title(); ?></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<?php the_content(); ?>
</div>
</div>
</div>
</div>

JS код:

    $(document).ready(function(){
$("#clickme").on
("click", function(){
$("#myModal-" + $(this).attr('data-id')).modal();

});
});

Картина:

введите описание изображения здесь