javascript - Dynamically sort posts by tags into a Wordpress loop -

i got a custom loop wordpress custom blog page, , im displaying posts it, :

<section class="container blog-article-actu">             <div class="row">      <?php     $the_query = new wp_query('showposts=-1');      while ($the_query->have_posts()) :      $the_query->the_post();     $catobj = get_the_category();          ?>          <article class="blog-article-actu-article" style="background:url('<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->id), 'thumbnail' ); ?><?php echo $url ?>');">             <div class="blog-article-actu-article-top">                 <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>                 <div class="details-blog-article-actu">                     <div class="blog-article-actu-date">                         <span class="day"><?php the_time( 'd' ) ?></span><br>                         <span class="month"><?php the_time( 'f' ) ?></span>                     </div>                      <a href="#" target="_blank"><p>                          <?php                             if (($catobj[0]->name == 'actualités et évènements') or ($catobj[1]->name == 'actualités et évènements')) {                               echo "<img src=\"xxx/actu-icon.png\" alt=\"actualités et évènements\">";                             } elseif (($catobj[0]->name == 'témoignages') or ($catobj[1]->name == 'témoignages')) {                               echo "<img src=\"xxx/chat-icon.png\" alt=\"témoignages\">";                             } elseif (($catobj[0]->name == 'vidéos') or ($catobj[1]->name == 'vidéos')) {                               echo "<img src=\"xxx/video-icon.png\" alt=\"vidéos\">";                             } else {                               echo "";                             }                         ?>                     </p></a>                 </div>             </div>              <div class="blog-article-actu-article-bottom-wrap">                 <span class="blog-article-actu-article-excerpt"><?php the_excerpt();?></span>                 <span class="blog-article-actu-article-bottom"><a href="<?php the_permalink() ?>">en savoir <span>+</span></a></span>                 <div class="social-blog-article-actu">                     <a href="#" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>                     <a href="http://www.facebook.com/sharer.php?u=<?php the_permalink() ?>&t=<?php the_title(); ?>"><i class="fa fa-facebook" aria-hidden="true"></i></a>                 </div>             </div>         </article>      <?php  // end of loop.     endwhile;     ?>              </div>     </section> 

then asked build sort them, tags, dynamically, tag system 1 : https://codepen.io/chaaampy/pen/gworvp

but im bit lost ... thought tags each posts in loop, , add them css class, maybe show or hide articles in js ... meh, don't know, has got ideas me ?

thanks ! :)

if interested, found solution building : https://codepen.io/chaaampy/pen/gworvp

$(function filter() {     var selectedclass = "";     $(".link").click(function(){      selectedclass = $(this).attr("data-rel");  $(".wrap").fadeto(100, 0.1);     $(".wrap section").not("."+selectedclass).fadeout().removeclass('scale_anm'); settimeout(function() {   $("."+selectedclass).fadein().addclass('scale_anm');   $(".wrap").fadeto(300, 1); }, 300); }); 

});

note tags wordpress get_the_tags, , add them class elements want show / hide