Wordpress Post Type Infinite Scroll / Load more bu

I am using the following code to currently display a specified amount (24) of my custom post types on WP, as well as using the project categories to filter through the posts dynamically.

            <!-- Display Filters for Posts --->
            <ul id="filters">
                <li><a href="#" data-filter="*" class="selected">Everything</a></li>
             <?php 
             $terms = get_terms("project_categories"); // get all categories, but you can use any taxonomy
             $count = count($terms); //How many are they?
             if ( $count > 0 ){  //If there are more than 0 terms
             foreach ( $terms as $term ) {  //for each term:
             echo "<li><a href='#' data-filter='.".$term->slug."'>" . $term->name . "</a></li>\n";
             //create a list item with the current term slug for sorting, and name for label
             }
             } 
             ?>
            </ul>

        <!-- Filter Array --->
        <div class="row">
            <div class="col-md-12">

                    <?php $args = array( 'post_type' => 'bw_projects', 'posts_per_page' => 24 ); ?>

                    <?php $the_query = new WP_Query( $args ); ?>

                    <?php if ( $the_query->have_posts() ) : ?>
                        <ul class="img-list" id="isotope-list">
                        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 
                     $termsArray = get_the_terms( $post->ID, "project_categories" );  //Get the terms for this particular item
                     $termsString = ""; //initialize the string that will contain the terms
                     foreach ( $termsArray as $term ) { // for each term 
                     $termsString .= $term->slug.' '; //create a string that has all the slugs 
                     }
                     ?> 
                     <li class="<?php echo $termsString; ?>item project home-project"> <?php // 'item' is used as an identifier (see Setp 5, line 6) ?>
                             <a href="<?php echo get_permalink( $post->ID ); ?>">
                                 <?php the_post_thumbnail(); ?>
                                 <span class="text-content"><span><img src="<?php the_field('client_logo'); ?>" alt="" class=""></span></span>
                            </a>
                     </li> <!-- end item -->
                        <?php endwhile;  ?>
                        </ul> <!-- end isotope-list -->
                    <?php endif; ?>

            </div>
        </div><!-- Close Filter Array --->

This was built using the Isotope filtering, from these intructions with a few modifications. https://www.aliciaramirez.com/2014/03/integrating-isotope-with-wordpress/

UPDATE: After Marissa Comments, this is now how my code looks after the filters.

<?php $args = array( 'post_type' => 'bw_projects', 'posts_per_page' => 18 ); ?>

<?php $the_query = new WP_Query( $args ); ?>

<?php if ( $the_query->have_posts() ) : ?>
<ul class="img-list" id="isotope-list">

<?php $total_posts = wp_count_posts('bw_projects');
$total_posts = $total_posts->publish;
$number_shown = 0; ?>

<?php while ( $the_query->have_posts() ) : $the_query->the_post(); 
$termsArray = get_the_terms( $post->ID, "project_categories" );  //Get the terms for this particular item
$termsString = ""; //initialize the string that will contain the terms
foreach ( $termsArray as $term ) { // for each term 
$termsString .= $term->slug.' '; //create a string that has all the slugs 
}
?> 
<li class="<?php echo $termsString; ?>item project home-project"> <?php // 'item' is used as an identifier (see Setp 5, line 6) ?>
     <a href="<?php echo get_permalink( $post->ID ); ?>">
         <?php the_post_thumbnail(); ?>
         <span class="text-content"><span><img src="<?php the_field('client_logo'); ?>" alt="" class=""></span></span>
    </a>
</li> <!-- end item -->
<?php endwhile;  ?>
</ul> <!-- end isotope-list -->
<?php endif; ?>
            <?php if ( $number_shown < $total_posts ) { ?>
<div class="loadMore" data-offset="<?php echo $number_shown; ?>" data-total="<?php echo $total_posts; ?>">
        Load More
</div>
<?php } ?>

My loadmore file is in this current state:

<?php
global $post;
$the_offset = trim( sanitize_text_field( wp_unslash( $_POST['pOffset'] ) ) );
$the_total = trim( sanitize_text_field( wp_unslash( $_POST['totalPosts'] ) ) );

$args = array( 'post_type' => 'bw_projects', 'posts_per_page' => 12, 'offset' => $the_offset );
$posts_shown = $the_offset; //Increment this every time you display a project
?>

                <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 
                     $termsArray = get_the_terms( $post->ID, "project_categories" );  //Get the terms for this particular item
                     $termsString = ""; //initialize the string that will contain the terms
                     foreach ( $termsArray as $term ) { // for each term 
                     $termsString .= $term->slug.' '; //create a string that has all the slugs 
                     }
                     ?> 
                     <li class="<?php echo $termsString; ?>item project home-project"> <?php // 'item' is used as an identifier (see Setp 5, line 6) ?>
                             <a href="<?php echo get_permalink( $post->ID ); ?>">
                                 <?php the_post_thumbnail(); ?>
                                 <span class="text-content"><span><img src="<?php the_field('client_logo'); ?>" alt="" class=""></span></span>
                            </a>
                     </li> <!-- end item -->
                        <?php endwhile;  ?>
                        </ul> <!-- end isotope-list -->
                <?php endif; ?>
<?php } ?>

<?php //Then check if we've shown all the posts or not, and we're done.
if ( $posts_shown >= $the_total ) { ?>
    <div id="all-posts-shown"></div>
<?php } ?>

On the outputted HTML the load more button is bringing in "data-total" and "data-offset"

<div class="loadMore" data-offset="0" data-total="25">
Load More
</div>

When load more is clicked the offset changes to:

<div class="loadMore" data-offset="12" data-total="25">
Load More
</div>

Except i am seeing no extra posts loading? I think i must have missed something.

You can use ajax to pull the next round of posts on button click or scroll. If you're still getting the hang of things, button clicks are a bit easier to track.

Before your loop to display posts, find out how many posts there are in total in your custom post type, and a counter to keep track of how many you've shown.

$total_posts = wp_count_posts('bw_projects');
$total_posts = $total_posts->publish;
$number_shown = 0;

Then increment number shown each time you display a project. Then, after your loop, check if you have more projects to display, then add a loadmore button with data attributes storing the offset (how many posts you've already displayed) and the total.

<?php if ( $number_shown < $total_posts ) { ?>
    <div class="loadMore" data-offset="<?php echo $number_shown; ?>" data-total="<?php echo $total_posts; ?>">
                Load More
    </div>
<?php } ?>

Then you can use AJAX to get the next posts. You want to register your AJAX function first:

<?php
/**
 * Put the following code in your functions.php file
 * get_loadmore is the name of the ajax function we are registering
 * projects-loadmore.php is the file with the contents which will be loaded 
 * when the ajax call is made. 
*/

            add_action('wp_ajax_get_loadmore', 'get_loadmore');
            add_action( 'wp_ajax_nopriv_get_loadmore', 'get_loadmore' );
            function get_loadmore() {

              include(get_template_directory().'/projects-loadmore.php');
              wp_die();

            }
?>

Then you want to set up your ajax function on button click

<script>
/**---
    Notes:
    When loadMore button is clicked
    This passes information to and pulls content dynamically from the template: projects-loadmore.php
    The returned php and html code is inserted at the end of the #isotope-list div's content
    variables are pulled from the loadmore button's data attributes.
    Variables Passed:
        - postOffset : how many posts have already been displayed
        - totalPosts :  The total number of published posts in this post type.
---**/

$('.loadMore').click(function() {

    //get the offset
    var postOffset = $(this).attr('data-offset');
    var totalPosts = $(this).attr('data-total');
    var thisObj = $(this);

    //get Page Template and put on page
    var ajax_url = '<?php echo admin_url('admin-ajax.php'); ?>';

    $.ajax({
        type: 'POST',
        url: ajax_url,
        data: {
            action: 'get_loadmore',
            pOffset: postOffset,
            totalPosts: totalPosts,
        },
        dataType: "html",
        success: function(data) {
            $('#isotope-list').append(data);
            $new_offset = parseInt ( thisObj.attr('data-offset') ) + 24;
            thisObj.attr('data-offset', $new_offset) //set the new post offset.
            if ( $('#all-posts-shown')[0] ) {
                thisObj.slideUp(); //hide loadmore if all posts have been displayed.
           }
        },

        error: function(MLHttpRequest, textStatus, errorThrown){
            alert("error");
        }
    });
}); //end of click function 
</script>

Then all that's left is to go into your projects-loadmore.php file, grab the variables, tweak your query, and display the posts:

<?php
global $post;
$the_offset = trim( sanitize_text_field( wp_unslash( $_POST['pOffset'] ) ) );
$the_total = trim( sanitize_text_field( wp_unslash( $_POST['totalPosts'] ) ) );

$args = array( 'post_type' => 'bw_projects', 'posts_per_page' => 24, 'offset' => $the_offset );
$posts_shown = $the_offset; //Increment this every time you display a project
?>

//Get your posts and insert your while loop and display code here

<?php //Then check if we've shown all the posts or not, and we're done.
if ( $posts_shown >= $the_total ) { ?>
    <div id="all-posts-shown"></div>
<?php } ?>

There's a lot more you can do with this in terms of animations and tweaking, but this should be enough to get you started.