Bootstrap Модал не работает с указанной c категорией вкладок (Wordpress)

Question

Я пытаюсь создать модальные вкладки портфолио с WordPress. Вывод будет -> ВСЕ | КАТЕГОРИЯ 1 | КАТЕГОРИЯ 2

ИЗОБРАЖЕНИЯ ПО КАТЕГОРИИ

МОДУЛЬ ОТКРЫВАЕТСЯ, КОГДА ПОЛЬЗОВАТЕЛЬ НАЖИМАЕТ НА ИЗОБРАЖЕНИЕ

В настоящее время я использую Bootstrap 4 для его создания. Вкладки работают, и модальные появляются, когда я нажимаю на другую категорию, пока сообщение не разделено на две категории, а затем экран замерз. Может кто-нибудь, пожалуйста, помогите? Я переместил модал из div и даже создал новый запрос et c для отладки, но я все еще сталкиваюсь с той же проблемой: (* ​​1007 *

<section class="portfolio-tabs ">


<?php $portfolios = get_terms('portfolio_type'); // get all the portfolio type ?>
<!-- Nav tabs -->
<div class="container">
  <div class="row ">
    <div class="col-12 mx-auto">
<ul class="mt-2 mb-3  ml-auto nav nav-tabs nav-top nav-justified wow fadeIn ">

  <?php foreach($portfolios as $portfolio) { ?>
    <li class="portfolioli active mx-auto">
      <a href="#<?php echo $portfolio->slug ?>" data-toggle="tab"><?php echo $portfolio->name ?></a> / 
    </li>
  <?php } ?>
</ul>
  </div>
  </div>
  </div>

<!-- Tab panes -->
<div class="tab-content">



 <?php foreach($portfolios as $portfolio) { ?>

<div class="tab-pane" id="<?php echo $portfolio->slug ?>">
  <?php     
  $args = array(
    'post_type' => 'portfolio',
    'posts_per_page'  => -1,
    'orderby' => 'title',
    'order' => 'ASC',
    'tax_query' => array(
      array(
        'taxonomy' => 'portfolio_type',
        'field' => 'slug',
        'terms' => $portfolio->slug,

      )
    )
  );
  $theportfolio = new WP_Query( $args );        
  ?>

    <?php if ( $theportfolio->have_posts() ) : // make sure we have portfolios to show before doing anything?>
      <div class="container-fluid no-gutters wow fadeIn  ">
     <div class="row no-gutters wow fadeIn mx-auto">
        <?php while ( $theportfolio->have_posts() ) : $theportfolio->the_post(); ?> 
        <?php $post_theportfolio = get_the_ID(); ?>



         <div class="col-xs-6 col-md-4 no-gutters portfolio-col wow fadeIn ">

        <img class="img-fluid no-gutters portfolio-image"src="<?php echo get_the_post_thumbnail_url (); ?>" style="object-fit: cover; margin: 0px; padding:0px; max-width:100%; max-height:100%;">
        <div class="overlay">
    <div class="text">  <h4>  
    <?php echo get_the_title( $post_theportfolio); ?></h4>
                    <a data-toggle="modal" data-target="#portfolio<?php echo $post_theportfolio; ?>">
                        Learn More
        </a>


            </div>


  </div>

    </div>

        <?php endwhile; ?>
             <?php endif; ?>

             <?php if ( $theportfolio->have_posts() ) : // make sure we have films to show before doing anything?>
    <?php while ( $theportfolio->have_posts() ) : $theportfolio->the_post(); ?> 
        <?php $post_theportfolio = get_the_ID(); ?>
          <!-- Modal -->
<div class="modal fade bd-example-modal-lg" style="z-index: 999999;" id="portfolio<?php echo $post_theportfolio; ?>" role="dialog" aria-labelledby="exampleModalCenterTitle" 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="exampleModalLabel">Modal 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 $image = get_field('portfolio_image'); if( !empty( $image ) ): ?>
    <img class="portfolio-modal-img"src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?><br/>
      <div class="text-center">

         <?php $ptitle = the_field ('portfolio_title');?>
      <p> <?php $desc = the_field('portfolio_description');?></p>
           </div>

      </div>
          <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>

    </div>
  </div>
</div>

<!-- End Modal -->
           <?php endwhile; ?>
    <?php endif; ?>

        <?php wp_reset_query() ?>

    </div>

    </div>

</div>
<?php }  ?>

</div><!-- tab-content -->
</section>