Counting Button clicks with Javascript, passing the count to WordPress loop, appending to isotope container

I’m trying to load post objects, and append them into an Isotope container.
I click a button (#append) and it grabs the getItemElement.

getItemElement is a wordpress loop.

I’m trying to pass the count to the wordpress loop so it can offset the loop and grab the next three posts, add three to the counter, and then grab the next three posts.

On first click it would add 3, bring the count to 8, then skip the first 8 posts, load the next 3, and stop. On second click it would add 3 to 8, skip the first 11 posts, and then load the next 3 and stop.

    var $appendcount = 5;
    $('#append').on( 'click', function() {
        $appendcount = $appendcount + 3;
        if($appendcount==23){$('#append').css('opacity','0.2');}
        // create new item elements
        var $elems = getItemElement().add();                    
        // append elements to container
        $container.append( $elems )
                  // add and lay out newly appended elements
                  .isotope( 'appended', $elems );
    });

    // Short WordPress Loop />
    function getItemElement() {
      var $item = $('<?php $postcounter =' . $appendcount . '; $instaqueryappend = new WP_Query( array("offset"=>$postcounter, "cat"=>15, "posts_per_page"=>3) ); if ( $instaqueryappend->have_posts() ) : while ( $instaqueryappend->have_posts() ) : $instaqueryappend->the_post(); $postcounter++; $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?><div class="element-item img append instagram img<?php echo $postcounter; ?>"><a href="<?php echo $feat_image; ?>"><img src="<?php echo $feat_image; ?>" alt=""></a></div><?php endwhile; else: endif; ?>');
      return $item;
    }