JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<div id="main">
  <div id="dv_7">7</div>
  <div id="dv_1">1</div>
  <div id="dv_8">8</div>
  <div id="dv_4">4</div>
  <div id="dv_11">11</div>
  <div id="dv_2">2</div>
</div>

JavaScript

function sortChildrenDivsById(parentId) {
    var parent = document.getElementById(parentId);
    var children = parent.getElementsByTagName("div");
    var ids = [], obj, i, len;
    for (i = 0, len = children.length; i < len; i++) {
        obj = {};
        obj.element = children[i];
        obj.idNum = parseInt(children[i].id.replace(/[^\d]/g, ""), 10);
        ids.push(obj);
    }
    ids.sort(function(a, b) {return(a.idNum - b.idNum);});
     for (i = 0; i < ids.length; i++) {
         parent.appendChild(ids[i].element);
     }
}

sortChildrenDivsById("main");