JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="list">
    <li value="20">doesnmatter1</li>
    <li value="10">doesntmatter2</li>
    <li value="5">doesntmatter3</li>
    <li value="30">doesntmatter4</li>
    <li value="519">doesntmatter5</li>
</ul>

<button id="ordena-menor">Sort</button>
<button id="ordena-maior">Sort</button>

JavaScript

$(function() {
			    $('#ordena-menor').click(function() {
			        var liContents = [];
			        $('ul li').each(function() {
			            liContents.push(parseInt($(this).attr('value'), 10));
			        });
			        liContents.sort(numOrdDesc);
			        $('ul li').each(function() {
			            $(this).text(liContents.pop());
			        });
			    });
			    
			    $('#ordena-maior').click(function() {
			        var liContents = [];
			        $('ul li').each(function() {
			            liContents.push(parseInt($(this).attr('value'), 10));
			        });
			        liContents.sort(numOrdCres);
			        $('ul li').each(function() {
			            $(this).text(liContents.pop());
			        });
			    });
			});

			function numOrdDesc(a, b) {
			    return (b - a);
			}

			function numOrdCres(a, b) {
			    return (a - b);
			}