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'),
minSorte = null;
$items.detach().sort(sort_li_effects).filter(function(i) {
var sorte = $(this).data('sorte');
if (i < 3) {
if (i == 0) {
minSorte = sorte;
}
minSorte = Math.min(sorte, minSorte);
return true;
}
return sorte >= minSorte;
}).appendTo($list);
});
function sort_li_effects(a, b) {
return ($(a).data('sorte')) < ($(b).data('sorte')) ? 1 : -1;
}
});