Inserting Google ads after every 8th post

I am attempting to insert a Google ad after the 8th and 16th post in the infinite scroll. The “blogcounter” was resetting after each “next page” of the Infinite Scroll”, so I started capturing the “pagenumber” and using it to keep a constant count of how many posts have been loaded.

The ad after the 8th post works fine. However, the ad after the 16th does not work. If I remove the </div> that closes the .piece div, then the ad will load behind the blog posts, but if I close that DIV first, then it will not load. It’s odd because it works great with the 8th post, no issues at all.

The page can be viewed live here: https://totallychaos.com/

The numbers below the posts are: PAGE NUMBER, BLOG POST NUMBER

<?php
        $pagenumber = get_query_var('paged');
        if ($pagenumber < 1) {
            $pagenumber = 1;
        }
        if ($pagenumber != 1 && $blogcounter < 1) {
            $blogcounter = ($pagenumber -1) * 12;
        }
        ?>
        <?php
        $blogcounter = $blogcounter + 1;
        ?>

        <div class="piece small-12 medium-6 large-3 columns infinite-scroll-content">
            <div id="post-<?php the_ID(); ?>" <?php post_class('blogpost-entry'); ?>>

                <div class="image-wrapper">
                    <a href="<?php echo the_permalink(); ?>">
                        <?php the_post_thumbnail( 'medium_large' ); ?>
                    </a>
                </div>

                <div class="text">
                    <a href="<?php echo the_permalink(); ?>"><div class="topic lifestyle"><span class="topic-block"></span><span class="topic-text"><?php the_category( ' ' ); ?></span></div></a>

                    <a href="<?php echo the_permalink(); ?>"><h1 class="headline"><?php the_title(); ?></h1></a>
                </div>
            </a>
        </div>
        <div style="clear: both"></div><h1><?php echo $pagenumber.', '.$blogcounter; ?></h1><div style="clear:both;"></div>

        <?php if ($blogcounter == 8) { ?>
            </div> <!--close .piece before displaying-->
            <script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
            <script>
            var googletag = googletag || {};
            googletag.cmd = googletag.cmd || [];
            </script>

            <script>
            googletag.cmd.push(function() {
                googletag.defineSlot('/108643446/Totallychaos-300x600-Homepage-Middle', [300, 600], 'div-gpt-ad-1470054100794-0').addService(googletag.pubads());
                googletag.pubads().enableSingleRequest();
                googletag.enableServices();
            });
            </script>

            <!-- /108643446/Totallychaos-300x600-Homepage-Middle -->
            <div style="clear: both; margin-bottom: 100px; margin: 0 auto;">
                <div id='div-gpt-ad-1470054100794-0' style='height:600px; width:300px;'>
                    <script>
                    googletag.cmd.push(function() { googletag.display('div-gpt-ad-1470054100794-0'); });
                    </script>
                </div>
            </div>
        <?php } ?>
        <?php if ($blogcounter == 16) { ?>
            </div><!-- close .piece before displaying-->
            <script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
            <script>
            var googletag = googletag || {};
            googletag.cmd = googletag.cmd || [];
            </script>

            <script>
            googletag.cmd.push(function() {
                googletag.defineSlot('/108643446/Totallychaos-Homepage-970x250-Middle', [970, 250], 'div-gpt-ad-1470054180643-0').addService(googletag.pubads());
                googletag.pubads().enableSingleRequest();
                googletag.enableServices();
            });
            </script>

            <!-- /108643446/Totallychaos-Homepage-970x250-Middle -->
            <div id='div-gpt-ad-1470054180643-0' style='height:250px; width:970px;'>
                <script>
                googletag.cmd.push(function() { googletag.display('div-gpt-ad-1470054180643-0'); });
                </script>
            </div>
        <?php } ?>

        <?php if ($blogcounter != 8 && $blogcounter != 16) { ?>
            </div> <!-- close .piece if no ads after -->
        <?php } ?>

https://www.ads-software.com/plugins/yith-infinite-scrolling/