JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<div id="108">108</div>
<div id="11">11</div>
<div id="30">30</div>
<div id="10">10</div>
<div id="127">127</div>
</div>
CSS
#container {width:200px;}
#container > div {width:100px;}
JavaScript
var container = document.getElementById("container"); // Get ref to element holding elements to be sorted
var fragment = document.createDocumentFragment(); // Setup fragment to hold sorted items
var children = container.children; // Setup a short ref to the container's children HTMLCollection
while(children.length > 0) { // Loop until the container is childless
var selected = 0; // Reset selected child to first item in the children
for(var i = 0,l = children.length;i < l;i++) // Loop over the children
if(parseInt(children[i].id,10) < parseInt(children[selected].id,10))
selected = i; // If the item was less then the currently selected one, select it
/* Remove the selected item from the container and add to the fragment */
fragment.appendChild(container.removeChild(children[selected]));
}
container.appendChild(fragment); // Append the fragment to the now childless container
console.log(container.children);