JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id='formleft' class='frms'>
<table id='container' width='50'>
<tr id='row'>
<td align='left'><input type='text' class='tf' value='0'></td>
<td align='left'><input type='text' class='tf' value='0'></td>
</tr>
</table>
<button id='newrow'>
NEW ROW
</button>
</div>
<button id='copy'>
COPY
</button>
<div id='formright' class='frmsR'>
</div>
CSS
.tf{
width:110px;
}
.frms{
float:left;
border:1px solid #000;
}
.frmsR{
float:right;
border:1px solid #000;
}
JavaScript
function clonerow(){
var $clone = $("#row").clone();
$clone.find('input').val(0);
$('#container').append($clone);
}
function copyform(){
$("#formright").empty();
var $clonetable = $("#formleft").clone();
$("#formright").append($clonetable);
}
$('#newrow').click(clonerow);
$("#copy").click(copyform);