Using Div as tables, how can I sort by specific column?

Question

I am grabbing an HTML document from a report that comes formatted with "DIV TABLES", I need to reformat its layout a bit and add some more data before presenting to user.

I have the following Div and I want to sort it by specific "column" (JS only), How can I adjust the JS code to be able to do that?, I am trying to avoid having to parse the HTML extract the data and re-code as table, currently I am just grabbing the whole HTML and adding/injecting some small modifications

Fiddle

HTML

<div class="divTable blueTable">
  <div class="divTableHeading">
    <div class="divTableRow">
      <div class="divTableHead">col2</div>
      <div class="divTableHead">col1</div>
      <div class="divTableHead">col4</div>
      <div class="divTableHead">col3</div>
    </div>
  </div>
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">bcell5_1</div>
      <div class="divTableCell">acell2_1</div>
      <div class="divTableCell">cell1_1</div>
      <div class="divTableCell">cell4_1</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">cell1_2</div>
      <div class="divTableCell">cell4_2</div>
      <div class="divTableCell">cell3_2</div>
      <div class="divTableCell">cell2_2</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">cell1_3</div>
      <div class="divTableCell">cell2_3</div>
      <div class="divTableCell">cell3_3</div>
      <div class="divTableCell">cell4_3</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">cell1_4</div>
      <div class="divTableCell">cell2_4</div>
      <div class="divTableCell">cell3_4</div>
      <div class="divTableCell">cell4_4</div>
    </div>
  </div>
</div>
<div class="blueTable outerTableFooter">
  <div class="tableFootStyle">
    <div class="links"><a href="#">&laquo;</a> <a class="active" href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">&raquo;</a></div>
  </div>
</div>

JS

/* sorts div 'table', but only works when you have a single column. otherwise it sorts the columns instead of the rows*/

var list = document.querySelector('.divTableRow');

[...list.children]
.sort((a,b)=>a.innerText>b.innerText ? 1:-1)
.forEach(node=>list.appendChild(node));

CSS

div.blueTable {
  border: 1px solid #1C6EA4;
  background-color: #EEEEEE;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

.divTable.blueTable .divTableCell,
.divTable.blueTable .divTableHead {
  border: 1px solid #AAAAAA;
  padding: 3px 2px;
}

.divTable.blueTable .divTableBody .divTableCell {
  font-size: 13px;
}

.divTable.blueTable .divTableRow:nth-child(even) {
  background: #D0E4F5;
}

.divTable.blueTable .divTableHeading {
  background: #1C6EA4;
  background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  border-bottom: 2px solid #444444;
}

.divTable.blueTable .divTableHeading .divTableHead {
  font-size: 15px;
  font-weight: bold;
  color: #FFFFFF;
  border-left: 2px solid #D0E4F5;
}

.divTable.blueTable .divTableHeading .divTableHead:first-child {
  border-left: none;
}

.blueTable .tableFootStyle {
  font-size: 14px;
  font-weight: bold;
  color: #FFFFFF;
  background: #D0E4F5;
  background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  border-top: 2px solid #444444;
}

.blueTable .tableFootStyle {
  font-size: 14px;
}

.blueTable .tableFootStyle .links {
  text-align: right;
}

.blueTable .tableFootStyle .links a {
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}

.blueTable.outerTableFooter {
  border-top: none;
}

.blueTable.outerTableFooter .tableFootStyle {
  padding: 3px 5px;
}

/* DivTable.com */
.divTable {
  display: table;
}

.divTableRow {
  display: table-row;
}

.divTableHeading {
  display: table-header-group;
}

.divTableCell,
.divTableHead {
  display: table-cell;
}

.divTableHeading {
  display: table-header-group;
}

.divTableFoot {
  display: table-footer-group;
}

.divTableBody {
  display: table-row-group;
}

Answer 1

Get the cells for the column and some info needed later

let tableBody = document.querySelector('.divTableBody');
let column = Array.from(
  tableBody.querySelectorAll('.divTableCell:nth-child(2)')
);

Sort this collection of elements

let sorted = column.sort((a, b) => a.innerText > b.innerText );

Pull the matching rows and re-insert them in order

sorted.forEach(v => {
  let row = v.parentNode;
  row.remove();
  tableBody.appendChild(row);
});