JSFiddle - React, Tailwind, and code Playground

HTML

<div id="a" class="item" data-val="6">Item a</div>
<div id="b" class="item" data-val="8">Item b</div>
<div id="c" class="item" data-val="2">Item c</div>
<div id="d" class="item" data-val="5">Item d</div>

<br />
<button onclick="sortOut()">Sort Out</button>

JavaScript

function sortOut() {
    var classname = document.getElementsByClassName('item');
    var divs = [];
    for (var i = 0; i < classname.length; ++i) {
        divs.push(classname[i]);
    }
    divs.sort(function(a, b) {
        return a.dataset.val.localeCompare(b.dataset.val);
    });
    
    var br = document.getElementsByTagName("br")[0];

    divs.forEach(function(el) {
        document.body.insertBefore(el, br);
    });

}