JSFiddle - React, Tailwind, and code Playground

by SpacePineapple

HTML

<table border="1" class="ordered">
    <tr>
        <td></td><td>hi</td><td>"sea food"</td>
    </tr>
   <tr>
       <td></td><td>hi</td><td>"sea food"</td>
    </tr>
    <tr>
       <td></td><td>hi</td><td>"sea food"</td>
    </tr>
    <tr>
       <td></td><td>hi</td><td>"sea food"</td>
    </tr>
    <tr>
       <td></td><td>hi</td><td>"sea food"</td>
    </tr>
</table>
<input type="button" id="b1" value="add column"/>

CSS

table.ordered{counter-reset: numList}
tr td:first-child::before {
      counter-increment: numList;
      content: counter(numList) ".";
}

JavaScript

function addColumn(){
    $(".ordered tr").eq(1).after($ ("<tr><td></td><td colspan='2'>hello!</td></tr>"));
}
$(b1).click(addColumn);