How do i update my loop to include the post id?

Question

I'm looking to achieve a image linking to a popup with each image having a unique link id. Currently only the first item links through to a popup but I need all of the images to link. Please help?

When you click the image it links to the bio for that employee but currently only the first item works?

my code:

            <?php
                $panelhead = $args['panelhead'];
                $panelintro = $args['panelintro'];
                $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 $recent = new WP_Query("post_type=team&posts_per_page=-1"); while($recent->have_posts()) : $recent->the_post();
                        $teamimg = get_field('team_image');
                        ?>



                        <!-- popup start -->
                            <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'); ?>" taret="_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>
                            <!-- popup end -->

                        <div class="team-item anim-target bottomfade-fm-dm" id="team-item">           
                            <a id="<?php echo $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>


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


            <script>
                // Initialize Variables
            var closePopup = document.getElementById("popupclose");
            var overlay = document.getElementById("overlay");
            var popup = document.getElementById("popup");
            var link = document.getElementById("<?php echo $teamid ?>");
            // Close Popup Event
            closePopup.onclick = function() {
            overlay.style.display = 'none';
            popup.style.display = 'none';
            };
            // Show Overlay and Popup
            link.onclick = function() {
            overlay.style.display = 'inline-block';
            popup.style.display = 'inline-block';
            }
            </script>

Answer 1

According to your loop, each item gets a popup (with same id which should be unique per page) - and that's wrong. You should be having one popup for all that gets the values from the underlining link. Here's an example with one technique.

function showModal(btn_open) {
  popup.style.display = 'block'
  var post = btn_open.closest(".post")
  var title = post.querySelector("h2").innerText
  var src = post.querySelector("img").src

  popup.querySelector("#popup-title").innerText = title
  popup.querySelector("#popup-image").src = src

}

function closeModal() {
  popup.style.display = 'none'
}

.d-flex {
  display: flex;
}

.post {
  border: 1px solid gray;
  margin: 10px;
  padding: 10px;
}

#popup {
  display: none;
  position: fixed;
  background: red;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  padding: 20px;
  text-align: center;
}

<div class="d-flex">
  <!-- while loop  -->
  <div class="post" data-id="1234">
    <h2>title of team 1</h2>
    <img src="https://picsum.photos/id/237/100/100">
    <p><button onclick="showModal(this)">open popup</button></p>
  </div>

  <div class="post" data-id="1235">
    <h2>title of team 2</h2>
    <img src="https://picsum.photos/id/238/100/100">
    <p><button onclick="showModal(this)">open popup</button></p>
  </div>

  <div class="post" data-id="1346">
    <h2>title of team 3</h2>
    <img src="https://picsum.photos/id/239/100/100">
    <p><button onclick="showModal(this)">open popup</button></p>
  </div>
  <!-- end while -->
</div>


<div id="popup">
  <p>popup for <span id="popup-title"></span>
  </p>
  <img id="popup-image">
  <button onclick="closeModal()">close</button>
</div>