JSFiddle - React, Tailwind, and code Playground
HTML
<div class="test">
<input type="button" class="clone" value="clone" />
<textarea type="text" class="txtarea"></textarea>
</div>
<div class="descBox">
<br> <span>Offer description</span>
<br>
<br>
<textarea id="txtareavalue"></textarea>
<input type="button" value="Save" class="save">
<input type="button" value="Close" class="close">
</div>
CSS
.descBox {
display:none;
background-color: #eee;
border-radius: 5px;
border: 1px solid #aaa;
position: fixed;
height: 300px;
width: 500px;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
box-sizing: border-box;
text-align: center;
z-index: 1000;
}
JavaScript
$(document).ready(function () {
var lastchanged;
$(".clone").click(function () {
$(".txtarea:first").clone(true).appendTo(".test");
$('#txtareavalue').val('');
});
$(".txtarea").click(function () {
$(".descBox").toggle();
lastchanged = $(this);
$('#txtareavalue').val(lastchanged.val());
});
$(".save").click(function () {
$(".descBox").toggle();
lastchanged.text($('#txtareavalue').val());
});
});