JavaScript filter functionality.

custom.js

var container = $('.filter-container');
	var elements = $('.filter-container > *');
	var buttons = $('.filter-buttons a');
	// set all elements active
	elements.addClass('selected elements');
	// remove select all filter
	 $('.filter-buttons a.select-all').remove();

	buttons.click(function(){
		// set all elements inactive by first call
		elements.removeClass('selected');

		
		if ($(this).hasClass("active")) {
			$("a").removeClass("active");
		  } 
		  else {
			$("a").removeClass("active");
			$(this).addClass("active");
		  } 
		  
		buttons.each(function() {
			// set selected elements active equal to active buttons
			if($(this).hasClass('active')) {
				container.find('.'+$(this).data('filter')).addClass('selected');
			}
		});

		// set all elements active if no filter selected
		if(!elements.hasClass('selected')) {
			elements.addClass('selected');
		}
	});

shortcode.php

//shortcode start
add_shortcode('career', 'job_shortcode');
function job_shortcode($atts)
{
    ob_start();
    $query = new WP_Query(array(
        'post_type' => 'job',
        'order' => 'DESC',
        'orderby' => 'id' 
    )); 
    if ($query->have_posts()) { ?>
        <div class="sc_jobs emplois">
		 <div class="ce_filter">
    <div class="filter-buttons text-left">
        <a data-filter="*" class="select-all">  </a>
		<?php 
                $categories = get_terms( array(
                        'taxonomy' => 'jobcat',
                        'hide_empty' => false,
                        'parent' => 0,
                    ) );
                ?>
                
                    <?php  
                        foreach($categories as $category) {
                            ?>
		<a data-filter="<?php echo $category->slug; ?>" class="select-<?php echo $category->slug; ?>"> <?php echo $category->name; ?></a>
                                 
                            <?php 
                        }   
                            
                    ?>     
		 
	</div>
		 
			 
    <div class="filter-container "> 
		 <?php while ($query->have_posts()) : $query->the_post(); ?>
		<?php $terms = get_the_terms( $post->ID, 'jobcat' ); ?>
		
		<div class="<?php   foreach ( $terms as $term ) {
             echo ' ' . $term->slug . ' ';
        }   ?> tab  cell block">
			
		 
                    <input id="tab-desktop-<?php the_ID(); ?>" type="radio" name="accordion">
                    <label for="tab-desktop-<?php the_ID(); ?>">
                        <div class="open-tab">
                            <div class="top-tab">
                                <span class="location"><?php the_field('sclocation'); ?></span>
                                <span class="job-title"><?php the_title(); ?></span>
                                <span class="sub-title"><?php the_field('scsub_title'); ?></span>
                            </div>
                        </div>
                    </label>
                    <button class="cta bg-blue mt-6 apply scjobapply">
						<?php
						if (ICL_LANGUAGE_CODE=='en') { ?>
							 <p>Apply</p>
						<?php }else{ ?>
							 <p>Postuler</p>
						<?php }
						?>
                       
                    </button>
                    <div class="tab-content">
                        <div class="inner">
                            <?php the_content(); ?>
                        </div>
                    </div>
                </div>
		
		 <?php endwhile;
            wp_reset_postdata(); ?>
		
	</div>
</div>