JSFiddle - React, Tailwind, and code Playground

HTML

<span class="order">Order <i>Asc</i></span>

<ul id="list" class="list">
    <li class="list-item">
        <strong class="score">5</strong>
        <blockquote class="content">
            Pellentesque ligula nibh, lacinia eget pharetra ut, vulputate vitae odio. Donec non mattis nisi. Pellentesque elit leo, tincidunt nec felis vitae, aliquet imperdiet purus. In elit ante, vestibulum non accumsan at, volutpat eget dolor. Quisque ut tincidunt elit. Curabitur rutrum dignissim enim ac aliquet. Curabitur et aliquam nisl.
            <cite>Malcolm Reynolds</cite>
        </blockquote>
    </li>   
    <li class="list-item">
        <strong class="score">8</strong>
        <blockquote class="content">
            Duis ac nisi id lorem rhoncus tempus eu sit amet nisi. Aenean ultrices congue ligula, ac molestie velit ultricies a. Nulla ac nunc et nisi placerat interdum sit amet ut erat. Integer vulputate nulla id orci cursus, eget ullamcorper justo ultricies. Nulla lorem dui, euismod non porttitor eu, sagittis in lacus. In suscipit lectus non viverra luctus. Pellentesque egestas, dolor at luctus eleifend, velit dui viverra risus, ac rutrum sapien ante at massa. Donec imperdiet consequat laoreet.
            <cite>Zoe Washburne</cite>
        </blockquote>
    </li>   
    <li class="list-item">
        <strong class="score">3</strong>
        <blockquote class="content">
            Etiam posuere, magna sit amet ullamcorper auctor, odio urna tempor velit, sit amet tincidunt lorem diam a velit. Integer a dapibus nunc. In iaculis vel sem ut gravida.
            <cite>Hoban Washburne</cite>
        </blockquote>
    </li>   
    <li class="list-item">
        <strong class="score">10</strong>
        <blockquote class="content">
            Etiam condimentum sodales dui in vestibulum. Vivamus euismod egestas porttitor. Proin dictum tempor euismod. Suspendisse elit nulla, elementum eu ornare in, tempus in massa. Proin elit sem, posuere nec tempor eget, suscipit sit amet dui....

CSS

ul, li {
    display: inline-block;
}
li {
    background-color: #eaeaea;
    position: relative;
    float: left;
    margin-bottom:5px;
}
.score {
    position: absolute;
    top: 30px;
    left: 20px;
    font-size: 50px;
}
.content {
    position: relative;
    float: left;
    padding-left: 50px;
}

JavaScript

var ordering = 'asc';
    
    function orderList(listID) {
        var container = document.getElementById(listID);
        var contents = container.querySelectorAll("li");
        
        var list = [];
        for(var i=0; i<contents.length; i++){
            list.push(contents[i]);
        }
        
        list.sort(function(a, b){
            console.log(a);
            console.log(b);
            var aa = parseInt(a.innerHTML);
            var bb = parseInt(b.innerHTML);
            return aa < bb ? -1 : (aa > bb ? 1 : 0);
        });

        if (ordering === 'asc') {
            list.reverse();
            ordering = 'desc';
        } else {
            ordering = 'asc';
        }
        
        for(var i=0; i<list.length; i++){
            container.insertBefore(list[i], container.firstChild);
        }
        
    }
    
    $('body').on('click', '.order', function(){
        orderList('list');
    });