JSFiddle - React, Tailwind, and code Playground

by Lynda333

HTML

<p>List 1</p>
<ul class="effects-list">
    <li data-sorte="2">creative</li>
    <li data-sorte="1">euphoric</li>
    <li data-sorte="2">uplifted</li>
    <li data-sorte="1">energetic</li>
    <li data-sorte="0">lazy</li>
    <li data-sorte="1">focused</li>
    <li data-sorte="2">happy</li>
    <li data-sorte="0">talkative</li>
    <li data-sorte="0">giggly</li>
    <li data-sorte="0">tingly</li>
    <li data-sorte="0">hungry</li>
    <li data-sorte="0">sleepy</li>
    <li data-sorte="0">aroused</li>
</ul>
<p>List 2</p>
<ul class="effects-list">
    <li data-sorte="2">creative</li>
    <li data-sorte="1">euphoric</li>
    <li data-sorte="0">uplifted</li>
    <li data-sorte="2">energetic</li>
    <li data-sorte="0">lazy</li>
    <li data-sorte="0">focused</li>
    <li data-sorte="0">happy</li>
    <li data-sorte="0">talkative</li>
    <li data-sorte="0">giggly</li>
    <li data-sorte="0">tingly</li>
    <li data-sorte="0">hungry</li>
    <li data-sorte="0">sleepy</li>
    <li data-sorte="0">aroused</li>
</ul>
<p>List 3</p>
<ul class="effects-list">
    <li data-sorte="1">creative</li>
    <li data-sorte="1">euphoric</li>
    <li data-sorte="2">uplifted</li>
    <li data-sorte="1">energetic</li>
    <li data-sorte="0">lazy</li>
    <li data-sorte="0">focused</li>
    <li data-sorte="1">happy</li>
    <li data-sorte="0">talkative</li>
    <li data-sorte="0">giggly</li>
    <li data-sorte="0">tingly</li>
    <li data-sorte="0">hungry</li>
    <li data-sorte="0">sleepy</li>
    <li data-sorte="0">aroused</li>
</ul>

JavaScript

$(function () {

    $('*[data-sorte="0"]').remove();
    $(".effects-list li").sort(sort_li_effects).appendTo('.effects-list');

    function sort_li_effects(a, b) {
        return ($(a).data('sorte')) < ($(b).data('sorte')) ? 1 : -1;
    }
    $(".effects-list li").filter(function (k, v) {
        if (k < 3) {
            min = parseInt($(v).data('sorte'));
            return false;
        } else return min > parseInt($(v).data('sorte'));
    }).remove();

});