How do I create a popup based on click?

Question

I'm trying to show a popup when a item is clicked. The .active class is added once the item is clicked but how do I add the popup container once the class is active?

I believe this is where I add a action to show the popup?

if ($(this).hasClass("active")) { // Do something here if the trigger is already active echo

Please see code below:

         <?php
                $panelhead = $args['panelhead'];
                $panelintro = $args['panelintro'];
                // NOT HERE!
                // $teamid = get_the_ID();
            ?>
            <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 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" id="<?php echo "target-".$teamid; ?>">
                            <div id="overlay"></div>
                            <div id="popup">
                                <div class="popupcontrols">
                                    <span id="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 SHOULD BE IN YOUR GLOBAL JS FUNCTIONS, NOT HERE, BUT I'VE LEFT IT HERE FOR THE PURPOSES OF THIS DEMONSTRATION -->
            <script type="text/javascript">
                // Initialize Variables
                var closePopup = document.getElementById("popupclose");
                var overlay = document.getElementById("overlay");
                var popup = document.getElementById("popup");
                var link = document.getElementById("<?php echo $teamid ?>");

                // SET POPUP(TARGET) BEHAVIOUR WHEN CLICKING A MATCHING TRIGGER ID
                $("[id^='trigger-".$teamid;']").on("click", function() {
                    var id = parseInt(this.id.replace("trigger-".$teamid;", ""), 10);
                    var thetarget = $("#target-" + id);
                    if ($(this).hasClass("active")) {
                        // Do something here if the trigger is already active
                        echo 
                        
                    } else {
                        // Do something here if the trigger is not active
                        // Remove active classes from triggers in general
                        $('.trigger').removeClass("active");
                        // Remove active classes from targets in general
                        $('.target').removeClass("active");
                        // Add active class to this trigger
                        $(this).addClass("active");
                        // Add active class to this target
                        $(thetarget).addClass("active");
                    }
                });

                // Close Popup Event
                closePopup.on("click", function() {
                    overlay.style.display = 'none';
                    popup.style.display = 'none';
                });
            </script>

Answer 1

Replace

this.id.replace("trigger-".$teamid;", "")

By

this.id.replace("trigger-" + <?php echo $teamid; ?>, "")