как клонировать элемент в клонированный элемент, используя jquery

Question

Я совершенно не знаком с jquery и мне нужна помощь по поводу клонирования элемента. поэтому в основном в моей программе есть один родительский элемент и дочерний элемент внутри родительского элемента. теперь, когда я нажимаю на клонирование (родительский элемент), он клонирует родительский элемент с дочерним элементом, и когда я нажимаю кнопку дочернего клонирования, он клонирует дочерний элемент, теперь в клонированном родительском элементе я не могу клонировать дочерний элемент. как я могу это исправить.

//  clone code of the main part

  
    
         $(document).ready(function() {

    $(".clone").click(function() {
        var $self = $(this),
            $element_to_clone = $self.prev(),
            $wrapper_parent_element = $self.parent(),
            $new_element = $element_to_clone.clone();

        $new_element.find('.del').removeClass('hidden disabled').addClass('enabled');

        $new_element.insertAfter($element_to_clone);

        return false;
    });

    $("body").on("click", ".del.enabled", function(event) {
        var $parent = $(this).parent();
        $parent.remove();
        return false;
    });
});



   //   end of clone code of the main part

    

  

    // clone code of the inner side table/ child of main part 


$(function(){
    $('#addMore').on('click', function() {
              var data = $("#tb tr:eq(1)").clone(true).appendTo("#tb");
              data.find("input").val('');
     });
     $(document).on('click', '.remove', function() {
         var trIndex = $(this).closest("tr").index();
            if(trIndex>1) {
             $(this).closest("tr").remove();
           } else {
             alert("Sorry!! Can't remove first row!");
           }
      });
});      

   //end of clone code of the inner side table/ child of main part 

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
  height: 100px;
}
body, html {
  width: 100%;
  height: 100%;
  margin: 0;
}

.containers {
  width: 100%;
  height: 100%;
}

.leftpane {
    width: 25%;
    height: 100%;
    float: left;
   
    border-collapse: collapse;
}

.middlepane {
    width: 50%;
    height: 100%;
    float: left;
    border-collapse: collapse;

}

.rightpane {
  width: 25%;
  height: 100%;
  position: relative;
  float: right;
  border-collapse: collapse;
}
.abcd{
     margin-left: 160px;
}
.spacing {
   
   margin-bottom:5px
}

  .hidden {
    display:none;
}

.stuff {
    width:310px;
    min-height:30px;
}

.stuffs_to_clone {
    position:relative;
    border:3px ;
    padding:30px;
}

.del, 
.clone
{
    z-index:999;
    cursor:pointer;
    background-position:left center;
    background-repeat:no-repeat;
    min-width:24px;
    min-height:24px;
    padding-left:26px;
    height: 24px;
    width: 24px;
}

.clone {
    background-image:url('http://cdn1.iconfinder.com/data/icons/musthave/24/Copy.png');
}

.del {
    position:relative;
    float:right;
    bottom:0px;    
    right:-200px;
    background-image:url('http://cdn1.iconfinder.com/data/icons/fugue/bonus/icons-24/cross.png');
}

.centered
{
    text-align:center;
}

hr.black  {
  border: 1.5px solid black;
}

 <link  rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="containers">
 
  <div class="leftpane">
   </div>
  <div class="middlepane">

<div id="printDiv">
 
  <br>


<div class="stuffs_wrapper">

    <form action="" method="post">
            <div class="stuffs_to_clone">
                <div class="stuff">
    <div class="del disabled hidden"></div>

  <div align="left" class="abcd">

        <select>
         <option value="" disabled="disabled" selected="selected">select days</option>
         <option value="1">Mon</option>
         <option value="2">tue</option>
         
   
        </select>
    </div>

<div class="spacing"></div>
         <div   >
                 <div align="left" class="abcd">
                      <select>
                            <option value="" disabled="disabled" selected="selected">type</option>
                            <option value="1">One</option>
                        </select>

                    </div>
        </div>

    <div class="spacing"></div>

  
  

  <table border="0" id="tb" class="abcd">
      <a>
       <tr >
        <th style="outline: thin solid">Excersise</th>
        <th style="outline: thin solid">time</th>
        <th style="outline: thin solid">reps</th>
    <th><a href="javascript:void(0);" style="font-size:18px;" id="addMore" title="Add More Person"><span class="glyphicon glyphicon-plus"></span></a></th>
      
     </tr>
    </a>
    
                    

    <tr>
        <th>
          <select>
            <option value="" disabled="disabled" selected="selected">select excersise</option>
            <option value="1">walk</option>
           
        </select>
      </th>
     

     <th>
      <select>
        <option value="" disabled="disabled" selected="selected">select time</option>
        <option value="1">10</option>
       
    </select>
   </th>

     <th>
      <select>
        <option value="" disabled="disabled" selected="selected">select reps</option>
        <option value="1">6</option>
        
    </select>
   </th>
    <td><a href='javascript:void(0);'  class='remove'><span class='glyphicon glyphicon-remove'></span></a></td>
    </tr>
   


</table>
  <div align="left" class="abcd">
<hr width="215%" class="black" /> <!-- black line -->
 
</div>

               </div>
               
                <div class="clone"  align title="Create new item">clone parent </div>
              </div></form></div>