Cacher is the code snippet organizer for pro developers

$(document).ready(function () {

    // * get total number of posts
    let totalPosts = $("#posts .post").length;
    // console.log(totalPosts);

    // * display by default
    let x = 3;
    
    $('#posts .post').hide(); // hide on load
    $('#posts .post:lt('+x+')').show(); // show the first x 

    $('[data-load-more]').click(function() {
        event.preventDefault();

        x = (x + 3 <= totalPosts) ? x + 3 : totalPosts;
        $('#posts .post:lt('+x+')').show();

        // * hide button when all posts are displayed
        if(x === totalPosts) {
            $(this).hide();
        };
    });

});

<section class="blog">
    <div class="blog__container container">

        <?php 
            $args = array( 
                'post_type'         => 'blog', 
                'posts_per_page'    => -1 // Use -1 for unlimited posts_per_page
            );
            $loop = new WP_Query($args);
            if ($loop->have_posts()):
        ?>

        <div class="col col--post" id="posts">
            <?php while ($loop->have_posts()): $loop->the_post(); ?>
                <div class="post">
                    <div class="post__date">
                        <h5 class="post__date--title body-copy"><?php printf( get_the_title() ); ?></h5>
                    </div>
                    <div class="post__content">
                        <div class="body-copy"><?php printf( get_the_content() ); ?></div>
                    </div>
                </div>
            <?php 
                endwhile; 
                wp_reset_postdata(); 

                // * show more button
                $count_posts = wp_count_posts('blog')->publish; 
                if ($count_posts > 3): 
            ?>
                <button class="body-copy" data-load-more>
                    See More <span class="fa fa-long-arrow-right"></span>
                </button>
            <?php endif; ?>
        </div>

        <?php endif; ?>

    </div>
</section>