Sort table by data attribute instead of text

Im trying to sort a table but by using a data attribute not values of cells, so I structured the following code:-

function sortTable(name, direction) {
  $("#tblSearchResults tbody").find('tr').sort(function(a, b) {
     let firstname = $(this).data('firstname');
    let surname = $(this).data('surname');
  
     console.log(firstname + "-" + surname);
  
    if (name === 'Firstname' & direction === 'Ascending') {
      return $(firstname, a).text().localeCompare($(firstname, b).text());
    } else if (name === 'Surname' & direction === 'Ascending') {
      return $(surname, a).text().localeCompare($(surname, b).text());
    } else if (name === 'Firstname' & direction === 'Descending') {
      return $(firstname, b).text().localeCompare($(firstname, a).text());
    } else if (name === 'Surname' & direction === 'Descending') {
      return $(surname, b).text().localeCompare($(surname, a).text());
    }
  }).appendTo("#tblSearchResults tbody");
}

Select allOpen in new window

Im trying it on a test dataset as:-

<table id="tblSearchResults">
<thead>
  <tr>
    <th>Name</th>
    <th>Firstname</th>
    <th>Surname</th>
  </tr>
</thead>
<tbody>
  <tr data-firstname='Herman' data-surname='Madden'><td>Herman Madden</td><td>Herman</td><td>Madden</td></tr>
  <tr data-firstname='Kasper' data-surname='Norris'><td>Kasper Norris</td><td>Kasper</td><td>Norris</td></tr>
  <tr data-firstname='Curran' data-surname='Hampton'><td>Curran Hampton</td><td>Curran</td><td>Hampton</td></tr>
  <tr data-firstname='Fuller' data-surname='Frost'><td>Fuller Frost</td><td>Fuller</td><td>Frost</td></tr>
  <tr data-firstname='Sigourney' data-surname='Morales'><td>Sigourney Morales</td><td>Sigourney</td><td>Morales</td></tr>
  <tr data-firstname='Inga' data-surname='Gardner'><td>Inga Gardner</td><td>Inga</td><td>Gardner</td></tr>
  <tr data-firstname='Jonas' data-surname='Zimmerman'><td>Jonas Zimmerman</td><td>Jonas</td><td>Zimmerman</td></tr>
  <tr data-firstname='Hiroko' data-surname='England'><td>Hiroko England</td><td>Hiroko</td><td>England</td></tr>
  <tr data-firstname='Whilemina' data-surname='Figueroa'><td>Whilemina Figueroa</td><td>Whilemina</td><td>Figueroa</td></tr>
  <tr data-firstname='Shafira' data-surname='Brennan'><td>Shafira Brennan</td><td>Shafira</td><td>Brennan</td></tr>
</tbody>
</table>

Select allOpen in new window

And then to sort the tables, I put a couple of buttons on, like:-

<button onclick="sortTable('FirstName', 'Ascending');">Firstname ASC</button>
<button onclick="sortTable('Surname', 'Ascending');">Surname ASC</button>
<button onclick="sortTable('FirstName', 'Descending');">Firstname DES</button>
<button onclick="sortTable('Surname', 'Descending');">Surname DES</button>

Select allOpen in new window

I dont understand why its not working, its not doing anything, even though its going through. Any suggestions of where Im going wrong?

Ive put my code on jsFiddle in the hope someone can help me :-S

https://jsfiddle.net/gv0fk2sr/2/