JSFiddle - React, Tailwind, and code Playground

HTML

<?php
    function movies_filter_posts() {
    if( !isset( $_POST['nonce'] ) || !wp_verify_nonce( $_POST['nonce'], 'bobz' ) )
        die('Denied!');
    /**
     * Default response
     */
    $response = [
        'status'  => 500,
        'message' => 'Some Things Wrong Try Again.',
        'content' => false,
        'found'   => 0
    ];
    $tax  = sanitize_text_field($_POST['params']['tax']);
    $term = sanitize_text_field($_POST['params']['term']);
    $page = intval($_POST['params']['page']);
    $qty  = intval($_POST['params']['qty']);
    /**
     * Check if term exists
     */
    if (!term_exists( $term, $tax) && $term != 'all-terms') :
        $response = [
            'status'  => 501,
            'message' => 'not tax founds.',
            'content' => 0
        ];
        die(json_encode($response));
    endif;
    if ($term == 'all-terms') : 
        $tax_qry[] = [
            'taxonomy' => $tax,
            'field'    => 'slug',
            'terms'    => $term,
            'operator' => 'NOT IN'
        ];
    else :
        $tax_qry[] = [
            'taxonomy' => $tax,
            'field'    => 'slug',
            'terms'    => $term,
        ];
    endif;
    /**
     * Setup query
     */
    $args = [
        'paged'          => $page,
		'post_type'      => 'movies',
        'post_status'    => 'publish',
        'posts_per_page' => $qty,
        'tax_query'      => $tax_qry
    ];
    $qry = new WP_Query($args);
    ob_start();
        if ($qry->have_posts()) :
            while ($qry->have_posts()) : $qry->the_post(); ?>	
<div class="col-md-3 col-sm-6 col-xs-6 boxWrapper" id="post-<?php the_ID();?>">
<div class="thumb">
<a href="<?php the_permalink(); ?>" rel="bookmark">

<?php 
$url = wp_get_attachment_url(get_post_thumbnail_id($post->ID) );
echo '<li class="imgContainer img-responsive" style="background-image: url('. $url.')">'; ?>	
<li class="rates"><?php the_terms( get_the_ID(), 'rates', '' ); ?></li>
</div></a>
<div...

JavaScript

(function($) {
	$doc = $(document);

	$doc.ready( function() {

		/**
		 * Retrieve posts
		 */
		function get_posts($params) {

			$container = $('#container-async');
			$content   = $container.find('.content');
	        $status    = $container.find('.status');

			$status.html('<span id="loadingmessage"></span>');

			$.ajax({
	            		url: bobz.ajax_url,
	            		data: {
	            			action: 'do_filter_posts',
					nonce: bobz.nonce,
					params: $params
	            		},
	            		type: 'post',
	            		dataType: 'json',
	            		success: function(data, textStatus, XMLHttpRequest) {
	            	
			            	if (data.status === 200) {
			            		$content.html(data.content);
			            	}
			            	else if (data.status === 201) {
			            		$content.html(data.message);	
			            	}
			            	else {
			            		$status.html(data.message);
			            	}
			         },
			         error: function(MLHttpRequest, textStatus, errorThrown) {

					$status.html(textStatus);
					
					/*console.log(MLHttpRequest);
					console.log(textStatus);
					console.log(errorThrown);*/
			         },
				complete: function(data, textStatus) {
					
					msg = textStatus;

	            	if (textStatus === 'success') {
	            		msg = data.responseJSON.found;
	            	}
                   $status.html('');
	            	/*console.log(data);
					
	            	console.log(textStatus);*/
	            }
	        });
		}

		/**
		 * Bind get_posts to tag cloud and navigation
		 */
		$('#container-async').on('click', 'a[data-filter], .pagination a', function(event) {
			if(event.preventDefault) { event.preventDefault(); }

			$this = $(this);

			/**
			 * Set filter active
			 */
			if ($this.data('filter')) {
				$this.closest('ul').find('.active').removeClass('active');
				$this.parent('li').addClass('active');
				$page = $this.data('page');
			}
			else {
				/**
				 * Pagination
				...