Loop not appending through infinite-scroll ajax call

Question

I'm having trouble debugging why the InfiniteScroll jQeury plugin isn't loading more of my .boxy class items. So far I've placed the div containing the selectors in different levels of heirarchy, but this isn't working to suss out any console errors.

<div id="fold-below" class="belowTheFold">
        <div id="articlePost">

            <?php if (have_posts()) : ?>
                <?php while (have_posts()) : the_post(); ?>
                  <div class="boxy">
                    <div class="read">

                        <div class="postmetadata">
                            <?php echo time_ago(); ?><Br />
                        </div>

                        <div class="articleImageThumb">
                        <a href="<?php if(get_post_meta($post->ID, "url", true)) echo get_post_meta($post->ID, "url", true); else the_permalink(); ?>" rel="<?php the_ID(); ?>"><?php echo get_the_post_thumbnail($page->ID, 'thumbnail'); ?></a>
                        </div>

                        <div class="articleTitle">
                                <a href="<?php if(get_post_meta($post->ID, "url", true)) echo get_post_meta($post->ID, "url", true); else the_permalink(); ?>" rel="<?php the_ID(); ?>"><?php the_title(); ?></a>
                        </div>

                    </div>

                  </div>
                  <?php endwhile; ?>
                 <?php endif; ?>
        </div>
        <div id="nav-below">
                        <a id="next" href="#">Load more</a>
        </div>
</div>

Here is the code I've found to be the most elegant so far for the InfiniteScroll jquery plugin:

$(document).ready(function($) {
        var $container = $('#articlePost');

// infinitescroll() is called on the element that surrounds
// the items you will be loading more of
  $container.infinitescroll({

    navSelector  : $('#nav-below'),
           // selector for the paged navigation 
    nextSelector : $('#nav-below a'),
                   // selector for the NEXT link (to page 2)
    itemSelector : $('#articlePost'),
                   // selector for all items you'll retrieve
  },
    // trigger Isotope as a callback
    function( newElements ) {
      // hide new items while they are loading
      var $newElems = $( newElements ).css({ opacity: 0 });
      // ensure that images load before adding to Isotope layout
      $newElems.imagesLoaded(function() {
        // show elems now they're ready
        $newElems.animate({ opacity: 1 });
    $container.isotope( 'appended', $newElems );
      });
    }
  );
});