Wordpress ajax post filter by category/taxonomy

Question

I want to do category base post filtering in WordPress. But I'm tired of debugging. I don't understand whether it is Ajax problem or something else. I tried many times. But no work is being done. Any suggestions or help please ...

  <div class="js-filter-main">
    <select name="gen_name" id="gen_id">
        <option value="">Filter by generic</option>
        <?php $terms = get_terms( 'gen-term' );
          if ( ! empty( $terms ) ) : 
          foreach( $terms as $term ) {
              echo '<option class="filter-item" value="'.  $term->term_id .'">'. $term->name .'</option>';
          }
          endif; ?> 
    </select>
  </div>


  <div class="js-filter-post">
    <?php $paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
    $args = array (
      'paged'           => $paged,
      'post_type'       => 'gen-post',
      'posts_per_page'  => 'publish',
      'order'           => 'DESC',
      'posts_per_page'  => 12, 
    );
    $query = new WP_Query( $args );
    if ( $query->have_posts() ):
      while( $query->have_posts() ): $query->the_post(); ?>
      <div id="post-<?php echo get_the_ID(); ?>" <?php post_class( array ( "single_item_wrap" )); ?>>
        <div class="gen-item">
          <h2><?php the_title(); ?><h2>
        </div>
      </div>
    <?php endwhile;
      else :
        echo 'Not found';
        wp_reset_postdata(); 
      endif; ?>
  </div>

$("#gen_id").change(function () {
    var category = $(this).find(':selected').val();
    $.ajax({
        type: 'post',
        url: my_ajax_object.ajaxurl,
        data: {
            action: 'single_item_wrap', 
            category: category,
        },
        success: function(result){
            $('.single_item').html(result);
        },
        error: function(result){
            console.warn(result);
        }
      });
});