JSFiddle - React, Tailwind, and code Playground

by Ehsan Sajjad

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 current;
  $(".clone").click(function(){
    $(".txtarea:first").clone(true).appendTo(".test");
   $(".txtarea:last").val('');
   $('#txtareavalue').val('');
  });
  
    $(".txtarea").click(function(){
     current= $(this);
    $(".descBox").toggle();
  });

      $(".save").click(function(){
    $(".descBox").toggle();
         
	$(current).text($('#txtareavalue').val());
  });
  
});