JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onClick="sortTotal()">
  Sort</button>
</button>
<table class="fl-table">
  <thead>
    <tr>
      <th>Player</th>
      <th>Player Name</th>
      <th>W1</th>
      <th>W2</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="agl-profile-img-new"><img src="https://via.placeholder.com/70C/O https://placeholder.com/"></td>
      <td>Heather Rankin</td>
      <td>4</td>
      <td>21</td>
      <td>25</td>
    </tr>
    <tr>
      <td class="agl-profile-img-new"><img src="https://via.placeholder.com/70C/O https://placeholder.com/"></td>
      <td>Stephen Puopolo</td>
      <td>3</td>
      <td>1</td>
      <td>4</td>
    </tr>
    <tr>
      <td class="agl-profile-img-new"><img src="https://via.placeholder.com/70C/O https://placeholder.com/"></td>
      <td>Latheesh V M V</td>
      <td>2</td>
      <td>26</td>
      <td>28</td>
    </tr>
  </tbody>
</table>

JavaScript

const sortTotal = () => {
  const tbl = [...document.getElementsByClassName("fl-table")][0];
  const tbody = [...tbl.tBodies][0];
  const oObjects = [];

  [...tbody.rows].forEach(row => {
    const cells = [...row.cells];
    oObjects.push({
      player: cells[0].innerHTML,
      name: cells[1].innerHTML,
      w1: cells[2].innerHTML,
      w2: cells[3].innerHTML,
      total: parseInt(cells[4].innerHTML, 10),
    })
  });

  oObjects.sort((a, b) => a.total > b.total ? 1 : -1);

  [...tbody.rows].forEach((row, i) => {
    const cells = [...row.cells];
    cells[0].innerHTML = oObjects[i].player;
    cells[1].innerHTML = oObjects[i].name;
    cells[2].innerHTML = oObjects[i].w1;
    cells[3].innerHTML = oObjects[i].w2;
    cells[4].innerHTML = oObjects[i].total;
  });
}