JSFiddle - React, Tailwind, and code Playground

HTML

<table class="ResultsTable">
    <thead class="header">
        <tr>
            <td class="rankColumn">Rank</td>
            <td class="nameColumn">Name</td>
            <td class="ageColumn">Age</td>                        
        </tr>
    </thead>
    <tbody id="resultsTableBody"></tbody>
</table>

JavaScript

let ranks = [];

function findNextIndex(rank) {
    var low = 0,
        high = ranks.length;

    while (low < high) {
        var mid = (low + high) >>> 1;
        if (ranks[mid] < rank) low = mid + 1;
        else high = mid;
    }
    return low;
}

function insert({Status, Rank, Name, Age}) {
	const html = `<tr>
    <td class="rankColumn">${Rank}</td>
    <td class="nameColumn">${Name}</td>
    <td class="ageColumn">${Age}</td>
  </tr>`;
  
  const index = findNextIndex(Rank);
  
  if (index === 0) {
  	$(`#resultsTableBody`).prepend(html);
  } else {
  	$(`#resultsTableBody > tr:nth-child(${index})`).after(html);
  }
  
  ranks.splice(index, 0, Rank);
}

insert({Rank: 1, Name: 'John', Age: 24 });
insert({Rank: 2, Name: 'Laura', Age: 22 });
insert({Rank: 3, Name: 'Hannah', Age: 31 });
insert({Rank: 1, Name: 'Misha', Age: 27 });
insert({Rank: 3, Name: 'Paul', Age: 43 });
insert({Rank: 1, Name: 'Bob', Age: 19 });

setInterval(() => {
  insert({Rank: Math.floor(Math.random() *3) + 1, Name: 'John Doe', Age: Math.floor(Math.random() *20) + 10});
}, 1000);