JSFiddle - React, Tailwind, and code Playground

by Gabriele Petrioli

HTML

<div class="a">
    <div id="Div01" class="group">
        <p>Div 01</p>
        <input id="Div01Field1" type="text" value="Me first" class="input" />
        <input id="Div01Field3" type="text" value="Me second" class="input" />
        <input id="Div01Field2" type="text" value="Me third" class="input" />
        <hr>
    </div>
    <div id="Div03" class="group">
        <p>Div 03</p>
        <input id="Div03Field1" type="text" value="Me seventh" class="input" />
        <input id="Div03Field2" type="text" value="Me eighth" class="input" />
        <input id="Div03Field3" type="text" value="Me ninth" class="input" />
        <hr>
    </div>
    <div id="Div05" class="group">
        <p>Div 05</p>
        <input id="Div05Field1" type="text" value="Me thirteenth" class="input" />
        <input id="Div05Field2" type="text" value="Me fourteenth" class="input" />
        <input id="Div05Field3" type="text" value="Me fifteenth" class="input" />
    </div>
</div>
<div class="a">
    <div id="Div02" class="group">
        <p>Div 02</p>
        <input id="Div02Field1" type="text" value="Me fourth" class="input" />
        <input id="Div02Field2" type="text" value="Me fifth" class="input" />
        <input id="Div02Field3" type="text" value="Me sixth" class="input" />
        <hr>
    </div>
    <div id="Div04" class="group">
        <p>Div 04</p>
        <input id="Div04Field1" type="text" value="Me tenth" class="input" />
        <input id="Div04Field2" type="text" value="Me eleventh" class="input" />
        <input id="Div04Field3" type="text" value="Me twelfth" class="input" />
        <hr>
    </div>
    <div id="Div06" class="group">
        <p>Div 06</p>
        <input id="Div06Field1" type="text" value="Me sixteenth" class="input" />
        <input id="Div06Field2" type="text" value="Me seventeenth" class="input" />
        <input id="Div06Field3" type="text" value="Me eighteenth" class="input" />
    </div>
</div>

CSS

.a { display: inline-block;
       width:200px;
       border: 1px solid black;
  }

JavaScript

// pure javascript solution

var gnodes = document.getElementsByClassName('group'); // find elements with group class - non-sortable
var groups = []; // create empty array to hold groups - sortable
for (var i = 0, l = gnodes.length; i<l; i++){ // place elements in array so we can sort it
    groups.push( gnodes[i] );
}
groups.sort(function(a,b){ // sort the array based on id
    return (a.id > b.id) ? 1 : -1;
});

var counter = 1; // incremental number to define the tabindex
for (var i = 0, l = groups.length; i<l; i++){
    var group = groups[i],
        elements = group.getElementsByClassName('input'); // find all input elements (must add class to all of them)
    for (var e = 0, len = elements.length; e < len; e++){
        elements[e].setAttribute('tabindex',counter++); // set tabindex
    }
}