我按照链接示例创建了一个代码：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_overlay_text

仅打开所有按钮上的第一个帖子的问题。如何解决此问题？

我的代码：

<style>
#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    cursor: pointer;
}

#text{
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 12px;
    color: white;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
}
</style>
<?php /* Template Name: Equipe  */ ?>

<?php get_header(); ?>

<?php
$args = array( 
    \'post_type\' => \'cpt_profissionais\',
    \'post_status\' => \'publish\',
    \'order\' => \'ASC\',
    \'posts_per_page\' => 9999,
    \'paged\' => $paged );
$wp_query = new WP_Query($args);
while ( have_posts() ) : the_post(); ?>

<?php the_title(); ?>

<div style="padding:20px">
  <button onclick="on()">Clique e saiba mais</button>
</div>

<div id="overlay" onclick="off()">
  <div id="text"> <?php the_content(); ?></div>
</div>  

<?php endwhile; ?>

<?php get_footer(); ?>

<script>
function on() {
    document.getElementById("overlay").style.display = "block";
}

function off() {
    document.getElementById("overlay").style.display = "none";
}
</script>