Add Infinite Scrolling Pagination Button

I’m very new to the WordPress. I’m currently using the FoundationPress theme and I’m trying to add a button that the user can click to load more post.

What I want is that initially the user will see four blog posts and when the user click on the read more button it will load the next four until there are no more posts and the button disappear.

I got up to the point where I can load the first four posts, but I’m having a hard time setting up a button to display the next four posts.

This is what I have so far:

<section class="row blogArticleWrapper">
                <?php while ( have_posts() ) : the_post(); ?>
                <?php
                the_post();
                $blog_posts = get_posts( array(
                    'post_type' => 'blog',
                    'posts_per_page' => 4,
                    'offset' => 1,
                    'orderby' => 'date',
                    'order' => 'DESC'
                ) );
                if ( $blog_posts ):
                ?>
                <?php
                foreach ( $blog_posts as $post ):
                    setup_postdata($post);
                    ?>
                    <article class="blog-profile small-12 columns">
                        <a href="<?php the_field("news_url"); ?>" title="<?php the_title(); ?>"><span class="name"><?php the_field("news_title"); ?></span></a>
                        <p class="writtenBy">Written by: <?php the_field("news_written_by"); ?> <span class="date">Date: <?php the_field("news_date"); ?></span></p>
                    </article><!-- /.profile -->
                <?php endforeach;
                ?>
                <?php endif; ?>
                <?php endwhile; // end of the loop. ?>
</section><!-- /.row -->

I tried following this guide, but I don’t know how to use it on my page.

Any help is appreciated,

Thanks.