JSFiddle - React, Tailwind, and code Playground

by joshpauljohnson

HTML

<ul>
    <li data-id="1" data-order="2">Cup</li>
    <li data-id="2" data-order="3">Mug</li>
    <li data-id="3" data-order="1">Thermos</li>
</ul>

JavaScript

$(document).ready(function() {
    var containers = [];
    $("li").each(function() {
        containers.push({
            id: $(this).attr("data-id"),
            order: $(this).attr("data-order"),
            name: $(this).text()
        });
        
    });
    
    containers.sort(function(a, b) {
        return a.order - b.order;
    });

    
    $.each(containers, function(i, container) {
        $("li:eq("+i+")").text(container.name).attr("data.id", container.id).attr("data-order", container.order);
    });
});