Sort table with sub-rows

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.25.4/js/jquery.tablesorter.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table id="tb" class="table tablesorter" border="1">
    <thead>
      <tr>
        <th>Col1</th>
        <th>Col2</th>
        <th>Col3</th>
      </tr>
    </thead>
    <tbody>
    <tr id="A-parent">
      <td>
        <button type="button" data-toggle="collapse" data-target="#A-child-1, #A-child-2"><span class="expand-toggle">&gt;</span></button>
        <span>Node A</span>
      </td>
      <td>A</td>
      <td>A</td>
    </tr>
    <tr id="A-child-1" class="collapse">
      <td>
        <span>A child 1</span>
      </td>
      <td>A1</td>
      <td>A1</td>
    </tr>
    <tr id="A-child-2" class="collapse">
      <td>
        <span>A child 2</span>
      </td>
      <td>Foo</td>
      <td>Bar</td>
    </tr>
    <tr id="B-parent">
      <td>
        <button type="button" data-toggle="collapse" data-target="#B-child-1, #B-child-2"><span class="expand-toggle">&gt;</span></button>
        <span>Node B</span>
      </td>
      <td>Foo</td>
      <td>Bar</td>
    </tr>
    <tr id="B-child-1" class="collapse">
      <td>
        <span>B child 1</span>
      </td>
      <td>Foo</td>
      <td>Bar</td>
    </tr>
    <tr id="B-child-2" class="collapse">
      <td>
        <span>B child 2</span>
      </td>
      <td>Foo</td>
      <td>Bar</td>
    </tr>  
    </tbody>
    
  </table>
  <button id="asc">Sort Ascending</button>
  <button id="dsc">Sort Descending</button>

JavaScript

var sortTable = function (ascending) {
  var tableBody = document.querySelector('#tb > tbody');
    //Get the rows as a native js array.
  var rows = Array.prototype.slice.call(tableBody.querySelectorAll('tr'));
    //Native js sort function.
    rows.sort(function(first,second){
    //The difference between char codes lets us sort alphabetically.
    //If they have the same code, they will be left in the same order.
    var posFirst = first.id.charCodeAt(0);
    var posSecond = second.id.charCodeAt(0);
    //Subtract, based on whether we want ascending or descending.
    return ascending ? posSecond - posFirst : posFirst - posSecond;
  });

  //Add the rows back to the table in our new order.
  for(var i=0; i<rows.length; i++) {
        tableBody.appendChild(rows[i]);
  }

}

document.getElementById("asc").addEventListener('click', function(){
  sortTable(true);
})
document.getElementById("dsc").addEventListener('click', function(){
  sortTable(false);
})