JSFiddle - React, Tailwind, and code Playground

by isimpledesign

HTML

<a href="" class="so" title="Schuko">Schuko</a>

<a href="" class="so" title="French">French</a>

<ul class="product_content">
<li class="prod" data-sockets="UK 15A CEE22 Schuko Swiss Danish ">testing testing</li>
<li class="prod" data-sockets="UK 15A French (16A) Socapex Harting Dutch Harting ">fgjfgj</li>
</ul>

JavaScript

$('a.so').live("click", function () {   
    
    $('.prod').fadeIn();
    
        var filter = $(this).attr("title");

        $('li[data-sockets*="'+filter+'"]').each(function() {
            $(this).fadeOut();
        });
        return false;
    });