Load more posts with multiple queries

I’ve been developing a theme which uses the load more ajax plugin, everything is setup and working great with the main query.

But, once I setup a new query for popular posts, the load more posts navigation for the popular posts loads the next posts of the main query. Any way to make it load the next posts page of the popular posts instead?

Here is the index file:

<?php get_header(); ?>

    <div id="blog">
      <h2 class="recent-head">Recent Posts</h2>
        <div class="recent-home-posts">
          <?php $paged = (get_query_var('paged')) ? (int) get_query_var('paged') : 1;
          $my_query = new WP_Query( array( 'posts_per_page' => 2, 'paged' => $paged ) );
while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
            <div class="post clearfix">
              <div class="thumb">
                <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('home-thumb'); ?></a>
                  <span class="cat"><?php the_category(' ') ?></span>
                  <span class="comme"><?php comments_popup_link('0', '1', '%'); ?></span>
              </div>
              <div class="entry">   
                  <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                  <span class="time"><?php the_time('d,F,Y'); ?></span>
                   <p><?php echo excerpt(40); ?></p>
                  <a class="read-more" href="<?php the_permalink(); ?>">Read More</a>
              </div>
            </div>
            <?php endwhile;?>
            <?php include( TEMPLATEPATH . '/load-more.php' );?>
        </div>

      <h2 class="recent-head">Popular Posts</h2>
        <div class="top-home-posts clearfix">
        <div class="topwrap">
<?php 
$paged = (get_query_var('paged')) ? (int) get_query_var('paged') : 1;
$popularpost = new WP_Query( array( 'posts_per_page' => 3, 'orderby' => 'comment_count', 'paged' => $paged  ) );
while ( $popularpost->have_posts() ) : $popularpost->the_post();  ?>
                <div class="top-post">
                    <div class="top-thumb">
                      <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('popular-thumb'); ?></a>
                        <span class="cat"><?php the_category(' ') ?></span>
                        <span class="comme"><?php comments_popup_link('0', '1', '%'); ?></span>
                    </div>
                    <div class="top-entry"> 
                      <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                        <span class="time"><?php the_time('d,F,Y'); ?></span>
                        <p><?php echo excerpt(20); ?></p>
                        <a class="read-more" href="<?php the_permalink(); ?>">Read More</a>
                    </div>
                </div>
                  <?php endwhile; ?>
            <div class="break"></div>
<div class="navigation-top">
    <?php next_posts_link('Older &raquo;') ?>
</div>
        </div>
        </div>
    </div>
<?php get_sidebar(); ?> 
<?php get_footer(); ?>

And this is the load more posts plugin code:

jQuery(document).ready(function($) {
        <?php 
$paged = (get_query_var('paged')) ? (int) get_query_var('paged') : 1;
$popularpost = new WP_Query( array( 'posts_per_page' => 3, 'orderby' => 'comment_count', 'paged' => $paged  ) );  ?>
var pbd_alp = {
        startPage: "1",
        maxPages: "<?php echo $popularpost->max_num_pages; ?>",
        nextLink: "<?php bloginfo('url'); ?>/page/2/"
};
    var pageNum = parseInt(pbd_alp.startPage) + 1;

    // The maximum number of pages the current query can return.
    var max = parseInt(pbd_alp.maxPages);

    // The link of the next page of posts.
    var nextLink = pbd_alp.nextLink;

    /**
     * Replace the traditional navigation with our own,
     * but only if there is at least one page of new posts to load.
     */
    if(pageNum <= max) {
        // Insert the "More Posts" link.
        $('.top-home-posts')
            .append('<div class="more-top-posts-page-'+ pageNum +'"></div>')
            .append('<div id="load-more-top"><a href="#">Load More Posts</a></div>');

        // Remove the traditional navigation.
        $('.navigation-top a').remove();
    }


    /**
     * Load new posts when the link is clicked.
     */
    $('#load-more-top a').click(function() {

        // Are there more posts to load?
        if(pageNum <= max) {

            // Show that we're working.
            $(this).text('Loading posts...');

            $('.more-top-posts-page-'+ pageNum).load(nextLink + ' .post',
                function() {
                    // Update page number and nextLink.
                    pageNum++;
                    nextLink = nextLink.replace(//page/[0-9]?/, '/page/'+ pageNum);

                    // Add a new placeholder, for when user clicks again.
                    $('#load-more-top')
                        .before('<div class="more-top-posts-page-'+ pageNum +'"></div>')

                    // Update the button message.
                    if(pageNum <= max) {
                        $('#load-more-top a').text('Load More Posts');
                    } else {
                        $('#load-more-top a').text('No more posts to load.');
                    }
                }
            );
        } else {
            $('#load-more-top a').append('.');
        }   

        return false;
    });
});

Any help/advice is appreciated, thank you.