JSFiddle - React, Tailwind, and code Playground

HTML

<table class="details">
    <tr>
        <th>This is Table 1</th>
    </tr>
    <tr>
        <td>Vote with your feet!</td>
    </tr>
</table>

<table class="details">
    <tr>
        <th>This is Table 2</th>
    </tr>
    <tr>
        <td>Vote with your gun!</td>
    </tr>
</table>

CSS

table {
    margin: 1em;
    border: 1px solid black;
}
td, th {
    padding: 1em;
}

JavaScript

//--- Get the 2nd table with class "details".
var jSecondTable    = $("table.details:eq(1)");

//--- Insert my table before it.
jSecondTable.before 
(
    '<table id="myTable">'
  + '    <tr>'
  + '        <th>This is Table 3</th>'
  + '    </tr>'
  + '    <tr>'
  + '        <td>Vote with your wallet!</td>'
  + '    </tr>'
  + '</table>'
);

//--- Delete the undesired table.
jSecondTable.remove ();