JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tags_list">
    <li><a href="#" id="tag_medium tag_france">Ui</a></li>
    <li><a href="#" id="tag_ui_fr">France</a></li>
    <li><a href="#" id="tag_database">Database</a></li>
</ul>

<ul class="story_list">
    <li rel="tag_leaderboard"> UI </li>
    <li rel="tag_medium  tag_france"> Database </li>
    <li rel="tag_big  tag_france"> UI </li>
    <li rel="tag_small  tag_france"> Database </li>
</ul>

CSS

.selected {
    color: red;
}

.story_list{
    margin-top: 30px;
}
.story_list li{
    border: 1px solid #000;
}

JavaScript

var list = $(".story_list li");
$(".tags_list li a").on('click',function( event ) {
    event.preventDefault();
    
    var relid = this.id,
        that = $( this );
    if ( that.is(".selected") ) {
        that.removeClass( "selected" );
        list.filter("[rel='" + relid + "']").removeClass("selected").hide("fast");
    } else {
        list.filter(":not(.selected)[rel!='" + relid + "']")
            .removeClass("selected").hide("fast");
        list.filter("[rel='" + relid + "']")
            .addClass("selected").show("fast");
        that.addClass( "selected" );
    }
    // If nothing selected show everything
    if ( !list.filter(".selected").length ){
        list.show("fast");
    }
});