jquery – 如何将子项无限地添加到此列表树中？

我希望能够无限地添加孩子/孙子/伟大的孩子/等.我正在制作这棵树.目前我已将它设置为只有3级深度,我无法找到一种方法让它像用户想要的那样深.

HTML

<div class="tag-tree">
<ul id="addParent">
  <li class="root" class="add-child">
    <input /> <p class="add-child-field"><i class="fa fa-plus"></i></p>
  </li>
  <li>
    <input />  <p class="add-gc-field"><i class="fa fa-plus"></i></p>      
    <ul> 
  <li><input /></li>
  <li><input /></li>
  <li><input /></li>
    </ul> 
  </li>
  <li><input /> <p class="add-gc-field"><i class="fa fa-plus"></i></p>   </li>
  <li>
    <input /> <p class="add-gc-field"><i class="fa fa-plus"></i></p>   
<ul>
  <li><input /></li>
  <li><input /></li>
</ul>  
  </li>
</ul>  
<div class="add-field"><i class="fa fa-plus"></i> New Parent Tag</div>
</div>

jQuery的

$(".add-field").click(function() {
  $('#addParent').append('<li class="root" id="addChild"><input /> <p class="add-child-field" onclick="add_child();"><i class="fa fa-plus"></i></p></li>')
});

$(document).on('click',".add-child-field",function() {
  $(this).parent().after('<li><input /><p class="add-gc-field"><i class="fa fa-plus"></i></p> </li>');
});



$(document).on('click',".add-gc-field",function() {
  if ($(this).next('ul').length) {
    console.log(this)
    $(this).next('ul').append('<li><input /></li>');
  }
  else {
    console.log(this)
    $(this).after('<ul><li><input /></li></ul>');
    }
});

http://jsfiddle.net/y6ekn7d2/

<li>
  <input data-level="XXX" />
  <p class="add-field">
    <i class="fa fa-plus"></i>
  </p>
</li>