js popup loads content from first post only instead of individual posts

Question

I have custom post type "members", which stores their details within custom-post-meta. I am currently working in it's custom-post-type-archive page named "archive-members.php" which lists all these members, with their details.

Now, I needed to display a meta-data related to each member into a simple js popup-box, so I used the code below and now each of these posts have a link which opens up a popup-box, when clicked.

I am able to display the post-meta-values in the popup-box but the problem is it shows the custom-field-value of the first post only. What I am expecting is that it should load individual custom-field-values of each of these posts, as they all have different values.

Here is a Simplified PHP

<?php get_header();?>
 <h1><?php echo post_type_archive_title(); ?></h1>

 <?php if(have_posts()) : while(have_posts()) : the_post();?>
             <?php if(has_post_thumbnail()) { .......... }?>
             <?php echo get_post_meta(............);?>

    <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">CLICK TO POPUP</a>
    <div id="light" class="white_content">
         <div class="close-button"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">CLOSE</a></div>
               <?php echo get_post_meta($post->ID, "account_number", true);?>
        </div>
                <div id="fade" class="black_overlay"></div>
<?php endwhile; endif; ?>

Here, what is happening is I am getting the same account number (which is the meta-value of the meta-key "account_number" of the First Post in the loop), whenever I am clicking on "CLICK TO POPUP" link of any of these posts. I guess the popup does not load content according to individual post IDs. What is the mistake in the loop ?

Note : I am using basic java-script for the popup and it works pretty well. I do not see the need of providing its css here. Anyways, if needed will provide it promptly.

Answer 1

It's happening because you are creating a popup for each member, but they all have the same id. That is incorrect syntax and as such JavaScript will not behave as you expect it to. (If you want the ID to recur for all for styling or other scripts, use a class).

Try this:

<?php get_header();?>
<h1><?php echo post_type_archive_title(); ?></h1>
<?php if(have_posts()) : $i = 0; while(have_posts()) : the_post();?>
    <?php if(has_post_thumbnail()) { .......... }?>
    <?php echo get_post_meta(............);?>
    <a href = "javascript:void(0)" onclick = "document.getElementById('light-<?php echo $i;?>').style.display='block';document.getElementById('fade').style.display='block'">CLICK TO POPUP</a>
    <div id="light-<?php echo $i;?>" class="white_content">
        <div class="close-button"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">CLOSE</a></div>
        <?php echo get_post_meta($post->ID, "account_number", true);?> </div>
    <div id="fade" class="black_overlay"></div>
    <?php $i++; ?>
<?php endwhile; endif; ?>

This will give each popup box a unique ID and the relevant member button will be only targeting said popup