Wordpress Ajax filter returning ajax 400 (bad gateway)

I have s imple program trying to filter post using ajax in wordpress.

I have tried everything but no matter what i do the ajax keeps returning a 400m error, can anyone see whats wrong with my code ? been at this 3 days now

Php

<?php $categories = get_categories(); ?>
<ul class="cat-list">
  <li><a class="cat-list_item active" href="#!" data-slug="">All projects</a></li>

  <?php foreach($categories as $category) : ?>
   <li>
  <a class="cat-list_item" href="#!" data-slug="<?= $category->slug; ?>" data-type="projecten">
    <?= $category->name; ?>
  </a>
</li>
  <?php endforeach; ?>
</ul>


<?php 
 $projects = new WP_Query([
   'post_type' => 'customer_stories',
   'posts_per_page' => -1,
   'tax_query' => [
      [
         'taxonomy' => 'category',
         'field'    => 'term_id',
         'terms'    => $termIds, // example of $termIds = [4,5]
         'operator' => 'IN'
      ],
   ]
]);
?>

<?php

    
// The Query.
$the_query = new WP_Query( $args );
// The Loop.
if ( $the_query->have_posts() ) {
    echo '<ul>';
    while ( $the_query->have_posts() ) {
        $the_query->the_post();
        echo '<li>' . esc_html( get_the_title() ) . '</li>';
    }
    echo '</ul>';
} else {
    esc_html_e( 'Sorry, no posts matched your criteria.' );
}

// Restore original Post Data.
wp_reset_postdata(); ?>

Ajax

function filter_projects() {
  $postType = $_POST['type'];
  $catSlug = $_POST['category'];

  $ajaxposts = new WP_Query([
    'post_type' => 'customer_stories',
    'posts_per_page' => -1,
    'category_name' => $catSlug,
    'orderby' => 'menu_order', 
    'order' => 'desc',
  ]);
  $response = '';

  if($ajaxposts->have_posts()) {
    while($ajaxposts->have_posts()) : $ajaxposts->the_post();
      $response .= get_template_part( 'src/page-modules/project-list-item.php' );
    endwhile;
  } else {
    $response = 'empty';
  }

  echo $response;
  exit;
}
add_action('wp_ajax_filter_projects', 'filter_projects');
add_action('wp_ajax_nopriv_filter_projects', 'filter_projects');

JavaScript

 (function($){
$.ajax({
  type: 'POST',
  url : wpajax.url,
  dataType: 'html',
  data: {
    action: 'filter_projects',
    category: $(this).data('slug'),
    type: $(this).data('type'),
  },
  success: function(res) {
    $('.project-tiles').html(res);
  }
});

WP_enqueue

<?php
// Theme css & js

function base_scripts_styles() {
    $in_footer = true;
    $ver = 1;

    // Loads JavaScript file with functionality specific.
    wp_enqueue_script( 'base-script', get_template_directory_uri() . '/dist/js/main.js', array( 'jquery' ), $ver, $in_footer );
    wp_enqueue_script( 'theme-script', get_template_directory_uri() . '/theme.js', array( 'jquery' ), $ver, $in_footer );
    wp_enqueue_script( 'ajax', get_template_directory_uri() . '/inc/ajax_script.js', array( 'jquery' ), $ver, $in_footer );

    // Implementation stylesheet.
    wp_enqueue_style( 'base-main', get_template_directory_uri() . '/dist/css/main.css', array(), $ver );

    // Loads our main stylesheet.
    wp_enqueue_style( 'base-style', get_stylesheet_uri(), array(), $ver );

    wp_localize_script(
        'ajax',
        'wpajax',
        'base-script',
        'themeAjax',
        array(
            'url' => admin_url( 'admin-ajax.php'),
            'nonce' => wp_create_nonce( 'theme_ajax_nonce' ),
            'searchButton' => esc_attr( __( 'Search', 'base' ), ),
        )
    );

    wp_register_script( 'lottie-player', 'https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js', array(), $ver );
}
add_action( 'wp_enqueue_scripts', 'base_scripts_styles' );

function theme_add_admin_styles() {
    wp_enqueue_style( 'admin_css', get_template_directory_uri() . '/admin-style.css', false, '' );
}
add_action( 'admin_enqueue_scripts', 'theme_add_admin_styles' );

also get this js error

jquery-3.6.0.min.js:2 Uncaught Error: Syntax error, unrecognized expression: #!
at se.error (jquery-3.6.0.min.js:2:13639)
at se.tokenize (jquery-3.6.0.min.js:2:21650)
at se.select (jquery-3.6.0.min.js:2:22477)
at Function.se [as find] (jquery-3.6.0.min.js:2:7116)
at S.fn.init.find (jquery-3.6.0.min.js:2:25047)
at new S.fn.init (jquery-3.6.0.min.js:2:25536)
at S (jquery-3.6.0.min.js:2:1051)
at l.t [as getAnchorTarget] (main.js?ver=1:3:153334)
at HTMLAnchorElement.<anonymous> (main.js?ver=1:3:153137)
at jquery-3.6.0.min.js:2:24485

As the error indicates, '#!' is not a valid expression for jQuery. Replace it with an actual link if you need to, or else you should remove it. If you really need to use the '#' as jQuery selector, you can escape it like this '\#'.