Ajax request returns only one wordpress post, not the whole query

Question

I am trying to create a "Load More Posts" button that makes an ajax request to the server. The issue here is that it brings back only one post, when I am expecting four.

load-more-posts-here.php

<div id="newPosts"></div> <button type="button" class="btn-primary" id="ajaxCall">Basic</button>

MyScript.js

    $('#ajaxCall').click( function() {
    $('#newPosts').load('my_query.php')

my_query.php

<?php 

define('WP_USE_THEMES', false);  
require_once('../../../wp-load.php');

$the_query = new WP_Query( array( 'tag' => 'recommended', 'posts_per_page'=> 4 )  );  

if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post();

    ?>

        <div class="recommended-post col-xs-12 col-sm-6 col-lg-3 ">
            <a href="<?php echo get_permalink(); ?>">

                <div class="rotateWrap">                                        
                    <div class="imgWrap" style=" background:url('<?php the_post_thumbnail_url(); ?>'); ">
                    </div>

                    <?php foreach((get_the_category()) as $category) { 
                        $catName = $category->cat_name;
                        $catSlug = $category->slug;
                     ?>
                        <div class="postCategory text-center" style="background-color:<?php getColor($catSlug); ?> !important">
                            <?php echo $catName; ?>
                        </div>
                </div>   

                <h2 class="postTitle text-center">
                    <?php echo get_the_title(); ?>
                </h2>

            </a>
        </div>

<?php endwhile; endif ;?>