How to add active class in tab-pane portfolio item in wordpress?

Question

I am making a dynamic portfolio section in wordpress. Site live link is here http://www.nayeemriddhi.info/testproject/portfolio/ . But the fact is when i open a portfolio item and select item from left side, for the first portfolio image it is working, the view portion of right side.but for the second and third image view portion of right side it is not working. although it has been added active class in static in code,it is working for the first image, why i don't know.Now i want to add active class dynamically in query3 loop portion for that item. Is it possible to add. the code is below....

 <section>            
<div class="container gal-container">
  <?php
    args = array(
       'post_type' => 'custom_portfolio',
       'posts_per_page' => '-1',
        );
      // the query
        $query = new WP_Query( $args );
         // The Loop   
         if ( $query->have_posts() )  ?>
          <?php while ( $query->have_posts() ) : $query->the_post() ; ?> 
             <!-- Item-->        
              <div class="col-md-4 col-sm-6 co-xs-12 gal-item">
                <div class="box">
                  <a class="trigger" data-iziModal-open="#modal<?php the_ID(); ?>">
           <img src="<?php echo get_post_meta(get_the_ID(), 'portfolio_image', true);   ?>">
                  </a>

                </div>
              </div>

              <!-- Modal-->
              <div id="modal<?php the_ID(); ?>" class="iziModal portfolio" data-izimodal-title="Portfolio Title" data-izimodal-subtitle="Web Design" style="max-width: 1200px important;">

                  <div class="col_one_third p-20">
                      <?php

                        $args2 = array(
                        'post_type' => 'custom_portfolio',
                        'posts_per_page' => '6',
                          );
                         // the query
                         $query2 = new WP_Query( $args2 );
                          // The Loop   
                         if ( $query2->have_posts() )  ?>
                        <?php while ( $query2->have_posts() ) : 
                          $query2->the_post() ; ?>

                     <div class="col_half p-10">
                        <a  href="#<?php the_ID(); ?>b" data-toggle="tab">
                                  <img src="<?php echo get_post_meta(get_the_ID(), 'portfolio_image', true);   ?>" class="portfolio-thumb"/>
                        </a>       
                      </div>

             <?php endwhile; wp_reset_query();  ?>

                        <div class="col_full p-10">
                          <div class="portfolio-links">
         <a href="#" class="btn btn-new" target="_blank">Launch Website</a>    

<a href="#request-quote-form" class="btn btn-danger request-quote-modal">Request a Quote</a>
                       </div>
                      </div> 

                  </div>        

                  <div class="col_two_third col_last">
                      <div class="tab-content">                    
                          <?php

                        $args3 = array(
                        'post_type' => 'custom_portfolio',
                        'posts_per_page' => '-1',
                          );
                         // the query
                         $query3 = new WP_Query( $args3 );
                          // The Loop   
                         if ( $query3->have_posts() )  ?>
                        <?php while ( $query3->have_posts() ) : 
                          $query3->the_post() ; ?>        
                          <div class="tab-pane active" id="<?php the_ID(); ?>b">
                              <img src="<?php echo get_post_meta(get_the_ID(), 'portfolio_image', true);   ?>" class="img-responsive"/>                         
                          </div>
                        <?php endwhile; wp_reset_query();  ?>                            
                        </div>
                        </div>
                        </div>        
                 <!-- Item End-->                
             <?php  endwhile; wp_reset_query();   ?>                  
            </div>        
          </section>Thanks for help....

Answer 1

You have to change the IDs of the second and third modal. Currently you have the same ID everywhere and the image changes on the first one too. Add another ID from the url that opens up the modal