JSFiddle - React, Tailwind, and code Playground
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="4">talkative</li>
<li data-sorte="3">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").each(function() {
var $list = $(this),
$items = $list.find('li'),
sortes = $items.map(function() {
return $(this).data('sorte');
}).get();
sortes.sort();
sortes.reverse();
var min_sorte = Math.min.apply(null, sortes.slice(0, 3));
$items.detach().filter(function() {
return $(this).data('sorte') >= min_sorte;
}).sort(sort_li_effects).appendTo($list);
});
function sort_li_effects(a, b) {
return ($(a).data('sorte')) < ($(b).data('sorte')) ? 1 : -1;
}
});