JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li><b>Dogs</b>
    <table border="1">
      <thead>
        <tr>
          <th>Name</th>
          <th>Breed</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Dakota</td>
          <td>German Shepherd</td>
        </tr>
      </tbody>
    </table>
  </li>
  <li><b>Snakes</b>
    <table border="1">
      <thead>
        <tr>
          <th>Name</th>
          <th>Breed</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Ingrid</td>
          <td>Python</td>
        </tr>
      </tbody>
    </table>
  </li>
  <li><b>Cats</b>
    <table border="1">
      <thead>
        <tr>
          <th>Name</th>
          <th>Breed</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Whiskers</td>
          <td>Tabby</td>
        </tr>
      </tbody>
    </table>
  </li>
</ul>
<input type="button" value="sort" id="cmdSort" />

JavaScript

document.getElementById("cmdSort").addEventListener("click", function(e) {
  var list = document.querySelector("ul");
  var items = list.querySelectorAll("li");
  var sortedList = Array.from(items).sort(function(a, b) {
    var c = a.firstElementChild.textContent,
      d = b.firstElementChild.textContent;
    return c < d ? -1 : c > d ? 1 : 0;
  });
  for (let item of sortedList) {
    list.appendChild(item);
  }
});