JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="txtbox" name="textbox" onkeypress="return isNumber(event)" />
<input type="reset" value="Reset">
<button type="button" onclick="copytbl()">COPY</button><br>
<br>
<table id="tbl" style="width:100%">
  <tbody id="tblbdy" class="tblbdy-ele">
    <tr>
      <td colspan="5">Header</td>
    </tr>
    <tr>
      <td>Name</td>
      <td colspan="3">Age</td>
      <td>Sex</td>
    </tr>
    <tr>
      <td rowspan="3">
        Name:<br>
        <input type="text" class="txtbox" name="textbox" /><br> Id:
        <br>
        <input type="text" class="txtbox" name="textbox" onkeypress="return isNumber(event)" /><br>
        <input type="reset" value="Reset">
      </td>
      <td></td>
      <td></td>
      <td></td>
      <td rowspan="3">
        <input type="radio" name="gender" value="male" checked> Male<br>
        <input type="radio" name="gender" value="female"> Female<br>
        <br>
      </td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td colspan="4"></td>
    </tr>
    <tr>
      <td colspan="5">Footer</td>
    </tr>
    <tr class="noBorder">
      <td>
        <br>
        <button type="button" class="getDataBtn" onclick="getdata('tblbdy')">GET DATA</button><br><br> Name:
        <br>
        <input type="text" class="txtbox" name="textbox" /><br> Id:
        <br>
        <input type="text" class="txtbox" name="textbox" /><br>
      </td>
    </tr>
</table>

CSS

table,
td {
  border: 1px solid black;
  border-collapse: collapse;
  height: 90px;
  text-align: left;
}

tr.noBorder td {
  border-right-style: hidden;
  border-left-style: hidden;
}

JavaScript

function copytbl() {
  var i, j;
  j = document.getElementById("txtbox").value;
  for (i = 0; i < j - 1; i++) {
  	var newId = "newID-"+(document.querySelectorAll('.tblbdy-ele').length+i);
    var row = document.getElementById("tblbdy"); // find row to copy
    var table = document.getElementById("tbl"); // find table to append to
    var clone = row.cloneNode(true); // copy children too
    clone.id = newId; // change id or other attributes/contents
    table.appendChild(clone); // add new row to end of table
    var getDataBtn = document.getElementById(newId).getElementsByClassName("getDataBtn")[0]
    getDataBtn.onclick = getdata(id){
        getdata(newId);
    };
  }
}

function getdata(id) {
console.log(id);
	var table = document.getElementById(id);
  document.getElementById(id).getElementsByClassName("txtbox3")[0].value = document.getElementById(id).getElementsByClassName("txtbox1")[0].value;
  document.getElementById(id).getElementsByClassName("txtbox4")[0].value = document.getElementById(id).getElementsByClassName("txtbox2")[0].value;
}

function isNumber(evt) {
  evt = (evt) ? evt : window.event;
  var charCode = (evt.which) ? evt.which : evt.keyCode;
  if (charCode > 31 && (charCode < 48 || charCode > 57)) {
    return false;
  }
  return true;
}