Jquery ile alan klonlama?

Arkadaşlar merhaba, alan klonluyorum ekle dedikçe ekliyor, sil deyice siliyor burada problem yok, eklediğim alanın yanına bir ekle butonu daha ekliyorum, ve ekle deyince onunda altına aynı alanı fakat o alana alt bir alan olarak eklemek istiyorum, sonra ana alanı sil dediğimde alt alanları da silinebilsin, sabahtır uğraşıyorum fakat işin içinden çıkamadım, yardımcı olabilecek arkadaş olursa çok minnettar olurum. Selam ile....

<a  name="add" id="add"  class="btn btn-success btn-sm" rel=".clone"><i class='fa fa-plus-square'></i> Ekle</a>


<table id="dynamic_field">
		
		</table>
	
		<script>  
 $(document).ready(function(){  
      var i=1;  
      $('#add').click(function(){  
           i++;  
           $('#dynamic_field').append('<tr id="row'+i+'"> <td> <div style="width:95%;" class="form-group"><div class="form-control-wrapper form-control-icon-right"> <input class="form-control form-control-sm" name="alan_adi[]" placeholder="Ders Adı" type="text"> <i data-original-title="Örnek İsim, Türkçe,... gibi oluşturunuz." data-toggle="tooltip"  class="fa fa-info-circle"></i> </div> </div>  </td><td>  <div style="width:95%;"  class="form-group"> <div class="form-control-wrapper form-control-icon-right"> <input class="form-control form-control-sm" name="alan_bitis[]" placeholder="Soru sayısı" type="text"> </div> </div> </td> <td><div class="form-group"><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn-he btn_remove"><i class="fa fa-remove"></i></button></div></td><td><div class="form-group"><button type="button"  id="'+i+'" class="btn btn-success btn-he"><i class="fa fa-plus-square"></i></button></div></td></tr>');  
      });  
      $(document).on('click', '.btn_remove', function(){  
           var button_id = $(this).attr("id");   
           $('#row'+button_id+'').remove();  
      });  
     
	
 });  
 </script>