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 class='newrow'>
NEW ROW
</button>
<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 class='newrow'>
NEW ROW
</button>
</div>
<button id='copy'>
COPY
</button>
<div id='formright' class='frmsR'>
<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 class='newrow'>
NEW ROW
</button>
<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 class='newrow'>
NEW ROW
</button>
</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);
var container = $(this).prev()
container.append($clone);
}
function copyform() {
$("#formright").empty();
var $clonetable = $("#formleft").children().clone(true);
$("#formright").append($clonetable);
}
$('.newrow').click(clonerow);
$("#copy").click(copyform);