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="dLeft">
<form id="left">
<fieldset id="inputLeft">
<input name="textIn[]" type="text" value="" />
<input id="btnAdd" type="button" name="add" value="+" />
</fieldset>

<input id="btnCopy" type="button" name="copy" value="Copy ->" />
</form>
</div>
<div id="dRight">

</div>

CSS

#dLeft{
  position: absolute;
  left:2px;
  top:4px;
  width:200px;
  min-height:400px;
  overflow:auto;
  border: 1px black solid;
}
#dRight{
  position: absolute;
  left: 210px;
  top: 4px;
  width:250px;
  min-height:400px;
  overflow:auto;
  border: 1px black solid;
}
#btnAdd{
  margin-left:8px;
  font-weight:900;
}
#btnCopy{
  margin-left:80px;
}

JavaScript

$('#btnAdd').on('click',function(){
	$('#inputLeft').append('<input name="textIn[]" type="text" value="" />');
})
$('#btnCopy').on('click', function(){
$('#dRight').html('');
  $('#dRight').append('<form id="right">');
  $('#inputLeft :input').clone().appendTo('#dRight');
  $('#dRight').append('</form>');
})