如何在Bootstrap 4 Modal，Wordpress中显示帖子中的特定内容

Question

I have searched for this answer, I tried a lot of things but it is still not working... Here below I'll give you the code. Please, I will be so grateful to the person that will help me. Thank You.

---

I will try to explain to you what I did. Basically, I linked the Post ID to the modal window to display the specific post content on a specific modal window. Seems like it might work, but nope. I realized that the modal id link does not change while the Link it is changing... I don't what to do... Here Below I Will Give you a screenshot. Sorry If I made a mistake explaining you all this..:)

PHP Code:

    <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 code:

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

          });
      });

Picture:

enter image description here