How do I get the close button to work after popup has appreared?

Question

I have most of the code activated the .active class when you click a team member but the close button doesnt do anything onclick?

Basically, it adds .active class which shows the popup on click and then I want the popup to hide/the .active class to be removed once the X has been clicked?

I want it to remove the .active class on click. Please take a look at my code:

                            <?php
                                $panelhead = $args['panelhead'];
                                $panelintro = $args['panelintro'];
                                // NOT HERE!
                                // $teamid = get_the_ID();
                            ?>
                            <a id="team"></a>
                            <div class="fullcol pb-team-panel pb-padding">
                                <div class="midcol clearfix">

                                    <div class="fullcol copy-wrapper clearfix">
                                        <div class="team-intro copycol anim-target bottomfade-fm-dm">
                                            <h3><?php echo $panelhead; ?></h3>
                                            <p><?php echo $panelintro; ?></p>
                                        </div>
                                    </div>

                                    <div class="fullcol team-grid">
                                        <?php 
                                        // HERE IS THE QUERY LOOP, YOU NEED TO SET THE ID AFTER THIS QUERY OTHERWISE YOU'LL ONLY BE RETURNING THE ID OF THE CURRENT PAGE AND NOT THE TEAM MEMBER.
                                        $recent = new WP_Query("post_type=team&posts_per_page=-1"); while($recent->have_posts()) : $recent->the_post();
                                        // HERE!
                                        $teamid = get_the_ID();
                                        $teamimg = get_field('team_image');
                                        ?>

                                        <!-- The visible team item(s) -->
                                        <div class="team-item anim-target bottomfade-fm-dm">           
                                        <a class="trigger" id="<?php echo "trigger-".$teamid; ?>">

                                                <div class="team-image bg-image rounded-box" style="background-image: url(<?php echo $teamimg['url']; ?>);"></div>
                                                <h4><?php the_title(); ?></h4>
                                                <p><?php the_field('team_jobtitle'); ?></p>
                                            </a>
                                        </div>

                                        <!-- The popup item(s) -->
                                        <!-- popup start -->
                                        <div class="team-popup target" id="<?php echo "target-".$teamid; ?>">
                                            <div id="overlay"></div>
                                            <div id="popup">
                                                <div class="popupcontrols">
                                                    <span class="popupclose">X</span>
                                                </div>
                                                <div class="popupcontent">
                                                    <div class="g3">
                                                        <img src="<?php echo $teamimg['url']; ?>" />
                                                        <a class="nexbtn" href="<?php the_field('team_linkedin'); ?>" target="_blank" rel="noopener noreferrer">Follow <?php the_title(); ?> on LinkedIn</a>
                                                    </div>
                                                    <div class="g7">
                                                        <h4><?php the_title(); ?></h4>
                                                        <p><?php the_field('team_bio'); ?></p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- popup end -->

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

            <script type="text/javascript">
            jQuery(function($){
                // Initialize Variables
                var closePopup = $('#popupclose'),  
                    overlay    = $('#overlay'),
                    popup      = $('#popup');

                $('.trigger').on('click', function() {
                    const postId    = $(this).data('id');
                    var   theTarget = $('#target-'+postId);

                    console.log(postId); // For testing (to be removed)

                    if ( $(this).hasClass('active') ) {
                        // Do something here if the trigger is already active
                    } else {
                        // Close Popup Event
                        $('.popupclose').on('click', function() {
                            $('.trigger[data-id='+postId+']').removeClass('active');
                            theTarget.removeClass('active');
                        });
                    }
                });
            });
            </script>

Answer 1

I don't think you need to render a popup element for each member, you could simply populate it dynamically on member popup trigger. Please analyze the snippet below and let me know if you are happy with it. Noted because PHP can't run there I have simulated the Loop with a couple of static buttons. The opening and closing are triggered by jQuery's built-in function toggle(). If you still prefer to use the active class you can replace toggle with toggleClass('active').

jQuery(document).ready(function ($) {
    const openPopup = $(".open-popup");
    const popup = $("#popup");
    const closePopup = $(".close-popup");
    
    const memberImage = $("#memberImage");
    const memberTitle = $("#memberTitle");
    const memberBio = $("#memberBio");
    const memberLnk = $("#linkedIn");
    
   
    openPopup.click(function(e){
      e.preventDefault();
      //Populate Popup
      memberImage.attr('src', $(this).data('image'));
      memberTitle.text($(this).data('title'));
      memberBio.text($(this).data('bio'));
      memberLnk.attr('href', $(this).data('linkedin'));
      popup.toggle();
    })
    
    closePopup.click(function(e){
      e.preventDefault();
      popup.toggle(); 
    })
});

#popup{
  position: fixed;
  width: 60%;
  background-color: #fff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 20px;
}

.open-popup{
  background-color: #5a5afa;
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  display: inline-block;
}
.flex{display: flex}

.popup-content{
  padding-left: 10px;
}

#memberBio{
  margin-bottom: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- PHP Version -->
<!-- <a class="open-popup" data-title="<?php echo get_the_title() ?>" data-image="<php echo $teamimg['url']; ?>" data-bio="<?php echo get_field('team_bio');  ?>" data-linkedin="<?php echo get_field('team_linkedin'); ?>">
  Open Popup
</a> -->

<!-- Simulate Loop -->

<!-- Steve Team Member -->
<a class="open-popup" data-title="Steve" data-image="https://via.placeholder.com/150" data-bio="Seteve is a great guy, he has been with us since WW2" data-linkedin="https://www.linkedin.com/">
  Open Popup
</a>

<!-- Albert Team Member -->
<a class="open-popup" data-title="Albert" data-image="https://via.placeholder.com/150" data-bio="Albert is the CEO" data-linkedin="https://www.linkedin.com/">
  Open Popup
</a>

<!-- Loop End -->


<!-- Popup Outside Loop -->
<div id="popup" style="display: none">
  <a class="close-popup">Close</a>
  <div class="flex">
  <div>
  <img id="memberImage"/>
  </div>
  <div class="popup-content">
  <h2 id="memberTitle"></h2>
  <div id="memberBio"></div>
  <a id="linkedIn" targe="_blank">LinkedIn Profile</a>
  </div>
  </div>
</div>