JSFiddle - React, Tailwind, and code Playground

HTML

<div id="addRow">Add Row</div>
<table>
  <thead>
    <tr>
      <th colspan="2">Header</th>
      <th colspan="2">Header</th>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>aa</td>
      <td>aa</td>
      <td>aa</td>
      <td>a</td>
      <td>a</td>
    </tr>
    <tr>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
      <td>a</td>
    </tr>
  </tbody>
</table>

CSS

table {border: 1px solid;}
td, th {
    border: 1px solid;
    width: 75px;
}
th {height: 40px;}
td {height: 75px;}

#addRow {
  border: 1px solid red;
  background-color: blue;
  color: white;
  display: inline-block;
  margin-bottom: 5px;
  padding: 5px 10px;
}
#addRow:hover {cursor: pointer}

JavaScript

$('#addRow').click(function(){
	var newOne = $("table tr:last").clone();
  
  newOne.insertAfter("table tr:last");
  $("table tr:last td").text("");
  });