How to add a Load more button inside a loop with a category filter

[Sicario]

Hello Guys, I am a Newbie Front End Designer and I am not really good in Ajax but I'm working on how to limit the posts to 6 and put a load more button inside the loop with a filter category. I put my code inside the category.php which is the standard template for categories.

Here's the code of category filter and its loop inside category.php

<ul class="categories-filters">
<?php
if (is_category()) {
$cat = get_query_var('cat');
$this_category = get_category($cat);
$this_category = wp_list_categories('hide_empty=0&hierarchical=false&order=ASC&orderby=title&show_count=0&title_li=&use_desc_for_title=1&child_of='.$this_category->cat_ID."&echo=0");
 if($this_category !='<li>No categories</li>') {
echo '<ul class="ul-menu">'.$this_category.'</ul>'; 
}
}
?>
</ul>
<div class="content">
<?php
if(have_posts() ) { ?>
<div id="main-content">
<div id="inside">
<?php $i = 0; ?>
<?php while (have_posts()) : the_post();
if($i % 3 == 0) { ?>
<div class="row ng-row">
<?php } ?>
<div class="col-md-4 col-sm-12 col-xs-12 half">
<a href="<?php the_permalink();?>">
<div class="img-holder">
<?phpif ( has_post_thumbnail() ) {
the_post_thumbnail(); }
else {
echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) 
 . '/assets/img/thumbnail-default-rev.jpg" />';
}
?>
<h2 class="project-title"><?php the_title() ?></h2>
<small>see more ></small>
</div>
</a>
</div>
<?php $i++; 
if($i != 0 && $i % 3 == 0) { ?>
 </div><!--/.row-->
<div class="clearfix"></div>
<?php } ?>
<?php endwhile; }
wp_reset_query(); ?>

</div>
</div>
</div>

and my ajax code for category filter inside category.php

function cat_ajax_get(catID) {
 jQuery("a.ajax").removeClass("current");
 jQuery("a.ajax").addClass("current"); //adds class current to the category menu item being displayed so you can style it with css
 jQuery("#loading-animation").show();
 var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); //must echo it ?>';
 jQuery.ajax({
 type: 'POST',
 url: ajaxurl,
 data: {"action": "load-filter", cat: catID },
 success: function(response) {
  jQuery("#category-post-content").html(response);
  jQuery("#loading-animation").hide();
  return false;
 }
 });
}

I tried to find a solution over the internet but unluckily no suits for my code. I tried also to create an argument like post_per_page but it breaks my category filter and post the posts randomly not but categorized. I hope someone helps me.
I will appreciate any helps thank you :)

[tangor]

Welcome to Webmasterworld, @Sicario!

Sadly I don't mess with WP or use ajax so can't help ... but this post will bump your message back up in the recent posts list. Maybe someone will see it and have an answer.

[NickMNS]

@Sicario, welcome WW. I am having trouble understanding what exactly your are trying to achieve and what exactly is not working, also I can't help with the PHP.

Just some advice regarding the JS/jQuery as a newbie you may want to look at using the fetch api instead of jQuery/AJAX. I personally find it more intuitive and straight forward.
[developers.google.com...]

Now some things with your code:

 jQuery("a.ajax").removeClass("current");
 jQuery("a.ajax").addClass("current");

As I read this you are simply removing and immediately adding the same class back, why?
Also I don't see where the <a> tag with class "ajax" is?

jQuery("#category-post-content").html(response);

This suggest that each time the "load more" link (I assume that you have) is clicked the new content will overwrite the content that is already displayed in the #category-post-content element. Is this what you want?
Moreover, I strongly recommend that you avoid using .html() here. It uses document.write() behind the scene, and that will likely throw a warning in Chrome and Firefox. The reason is that it will take the entire content of the element and load it into memory, then add (or overwrite) the existing contents and return it to the page. This can have a significant performance impact. Use .append() or .prepend() as appropriate.

Finally

return false;

I would avoid using this, use .preventDefault() instead, return False can cause some undesired effects with regards to event propagation.

I hope this helps.