Using Javascript for Looped Content

Question

I have set up a loop to pull in staff bios. When a user clicks on the thumbnail of the staff member a popup with the complete bio information for that "post" should be displayed. I have been able to connect most things, but when I click on a bio, the content of the popup is always from the last post. I assume this is because the script is outside of the loop. I can't imagine that putting the script inside the loop is a good idea. Sorry, total rookie here. Can you please help me understand how I should set up the JS to display the correct information for each post?

Here is my loop code:

<?php
$staff = new WP_Query(array(
    'posts_per_page' => -1,
    'post_type' => 'staff_bios',
    'orderby' => 'title',
    'order'   => 'ASC'
));

while($staff->have_posts()){
    $staff->the_post(); ?>

//Below is what should display for each post.

<div class="staff-thumb" onclick="staffDetails()">
    //Thumbnail details here 
</div>

//Below is the pop up container (hidden until called).

<div id="<?php the_ID()?>" class="popup-wrap">
    <div class="popup-content">
        <span onclick="staffDetailsClose()" class="close">×</span>
        <h4><?php the_title(); ?></h4>
        //The rest of the bio details
    </div>
</div>
<?php }
?>

//Here is the Javascript (outside the loop, for now).
<script>
function staffDetails() {
document.getElementById("<?php the_ID()?>").style.display = "block";
}

function staffDetailsClose() {
document.getElementById("<?php the_ID()?>").style.display = "none";
}

window.onclick = function(event) {
if(event.target == document.getElementById("<?php the_ID()?>")) {
  document.getElementById("<?php the_ID()?>").style.display = "none";
   }
}
</script>

I appreciate any help, including the reference to other documentation. Also, since I am new on here, please let me know if you think this question could be set up differently or if you have any questions about what I am asking.

Answer 1

This may help

<?php
$staff = new WP_Query(array(
    'posts_per_page' => -1,
    'post_type' => 'staff_bios',
    'orderby' => 'title',
    'order'   => 'ASC'
));

while($staff->have_posts()){
    $staff->the_post(); ?>

//Below is what should display for each post.

<div class="staff-thumb" onclick="staffDetails(<?php the_ID(); ?>)">
    //Thumbnail details here 
</div>

//Below is the pop up container (hidden until called).

<div id="<?php the_ID()?>" class="popup-wrap">
    <div class="popup-content">
        <span onclick="staffDetailsClose(<?php the_ID(); ?>)" class="close">×</span>
        <h4><?php the_title(); ?></h4>
        //The rest of the bio details
    </div>
</div>
<?php }
?>


//Here is the Javascript (outside the loop, for now).
<script>
    modal = '';

    function staffDetails( p_id ) {
        modal = document.getElementById(p_id);
        modal.style.display = "block";
    }

    function staffDetailsClose( p_id ) {
        document.getElementById( p_id ).style.display = "none";
        modal = '';

    }

// based on https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal_close

// When the user clicks anywhere outside of the modal, close it. NOT TESTED
window.onclick = function(event) {
   if(event.target == modal) {
       modal.style.display = "none";
   }
}

</script>

Answer 2

You use the_ID() function outside the loop, this is a function that should be used inside. Also your approach of JavaScript could have been better by:

1. Instead of targeting each element by ID, target them by a class. ( If you have more elements, you will need to generate for each one a JavaScript function, which doesn't look like a good approach. Having a class with for example a name like "js-toggle-staff-tooltip" looks more good in HTML code. )
2. Don't modify the CSS directly, use a class, which you can toggle(add,remove), as you want. (This is a good practices : link)

There are a lot more to say... but I think this is enough...