如何在文本区域显示特定文本？

我有一个带有文本区域的表格。

但是我没有足够的空间来放置较大的文本区域。

因此，我决定这样做：

我在表单上插入了一个高度较小的文本区域，当有人单击该文本区域时，将出现一个内部带有较大文本区域的新框。

但是我在JQuery中使用事件Clone，因为我可以选择多次克隆表单。

问题是，我可以将信息插入多个克隆的文本区域中，但是当我单击特定的文本区域时，它不会显示该文本区域中的当前值。

我只想添加带有信息的多个文本区域，然后再次单击特定的文本区域，然后在打开的Box内查看该文本区域的当前值，我该怎么做？

JsFiddle在这里：

http://jsfiddle.net/3RLkE/

框中的代码：

.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;
}

脚本代码

  var Element=null;
      $(".clone").click(function(){
          $(".txtarea:first").clone(true).appendTo(".test");
          $('#txtareavalue').val('');
          $('.txtarea:last').val('');
      });

      $(".txtarea").click(function(){
          Element= $(this);
          $(".descBox").toggle();
      });

      $(".save").click(function(){
      $(".descBox").toggle();


      Element.val($('#txtareavalue').val());
      Element.text($('#txtareavalue').val());

      $('#txtareavalue').val('');
  });

的HTML

  <div class="test">
     <input type="button" class="clone" value="clone" />

     <textarea type="text" class="txtarea"></textarea>

  </div>