jQuery TE not working after clone it

Question

I used the jQuery HTML Editor plugin from here. I want to create multiple HTML editors on clicking an 'add' button. Here is my code for that:

$(document).ready(function () {
  $(".jqte-test").jqte();
});

$('.clause-form').delegate(".add-button", "click", function () {
  if ($('.clause-box:last').find('.jqte-test').val() != "") {
    var newSection = $(this).parents('.clause-box').find('.jqte-test');
    var newDiv = $('.clause-form').append($(this).parents('.clause-box').clone());
    $(this).parents('.clause-box').find('.delete-button').show();
    $(this).parents('.clause-box').find('.add-button').hide();
    $('.clause-box:last').find('.jqte-test').jqteVal("");
    newSection.jqte();       
  }
});

After I clone the element the jQuery plugin is not working. I'm not able to do any basic operations. How can I do this?

<div class="clause-form">
  <div class="form-group clause-box">
    <div class="clause">
      <div class="col-md-3"></div>
      <div class="col-md-9">
        <textarea name="textarea" class="jqte-test student_grde" placeholder="Sub-Clause" id="txtSubClauseTemp" runat="server" style="width: 435px; !important"></textarea>
        <a href="javascript:void(0);" class="btn btn-primary add-button" id="btnAddRowTemp">+</a>
        <a href="javascript:void(0);" class="btn btn-danger delete-button" id="btnRemoveRowTemp" style="display: none;">X</a>
      </div>
    </div>
  </div>