Netstable alt menü ekletme sorunu

Merhabalar, arkadaşlar netstable eklentisinde ekle butonuyla alt menü eklemeye çalışıyorum fakat biraz hatalı ekleniyor. jsfiddle da çalıştırınca görebilirsiniz hataları.
kodu çalışır hali: http://jsfiddle.net/YgU52/48/ (hatalı çalışıyor)

$('.dd').nestable()
$(function(){
	var counted = $('.phonebox .boxedx').length;

	$('.phoneadd').click(function(){

	  counted++;

	  $('.phonebox').append('<div class="boxedx"><div class="control-group"><label class="control-label">Telefon Başlık </label><div class="controls"><input type="text"  name="phone['+counted+'][title]" class="input-medium"></div></div><div class="control-group"><label class="control-label">Telefon Numara</label><div class="controls"><input type="text"  name="phone['+counted+'][number]" class="input-medium"></div></div></div>')

	  return false

	});

	$('.phoneremove').click(function(){

		counted--;

		$('.phonebox .boxedx:last').remove();


		return false;

	});

   var countedkey = $('.dd-list li').length;
    	$('.keyoptadd').on('click', function () {
    	  countedkey++;
    $('.dd-list').append('<li class="dd-item dd3-item" data-id="'+countedkey+'"><div class="dd-handle dd3-handle" style="height:42px;"></div><div class="dd3-content" style="height:42px;"><input type="text" name="key['+countedkey+'][key]" class="input-large"><input type="text" name="key['+countedkey+'][expl]" class="input-large"><a href="" class="btn keyoptadd_in" onclick="return false">Add</a><a href="" class="btn keyoptdelete_in" onclick="return false">Del</a></div>  </li>');	
	jQuery('.afx').trigger('click',function(){});
    	  	return false
    	 	});
    	$('.keyoptdelete').on('click', function () {
    		countedkey--;
    		$('.dd-list li:last').remove();
    jQuery('.afx').trigger('click',function(){});
    		return false
    	});
    	$("body").on("click", 'a.keyoptadd_in', function () {
    	  countedkey++;
     $('<ol><li class="dd-item dd3-item" data-id="'+countedkey+'"><div class="dd-handle dd3-handle" style="height:42px;"></div><div class="dd3-content" style="height:42px;"><input type="text" name="key['+countedkey+'][key]" class="input-large"> <input type="text" name="key['+countedkey+'][expl]" class="input-large"><a href="" class="btn keyoptadd_in2" onclick="return false">Add</a><a href="" class="btn keyoptdelete_in" onclick="return false">Del</a></div></ol></li>').appendTo($(this).parent());	
    jQuery('.afx').trigger('click',function(e){});
    	  	return false
    	 	});
    	$("body").on("click", 'a.keyoptadd_in2', function () {
    	  countedkey++;
     $(this).parent().append('<li class="dd-item dd3-item" data-id="'+countedkey+'"><div class="dd-handle dd3-handle" style="height:42px;"></div><div class="dd3-content" style="height:42px;"><input type="text" name="key['+countedkey+'][key]" class="input-large"> <input type="text" name="key['+countedkey+'][expl]" class="input-large"><a href="" class="btn keyoptadd_in2" onclick="return false">Add</a><a href="" class="btn keyoptdelete_in" onclick="return false">Del</a></div></li>');	
    jQuery('.afx').trigger('click',function(e){});
    	  	return false
    	 	});
    	$('.keyoptdelete_in').on('click', function () {
    		countedkey--;
    		
    		$(this).parent().remove();
    jQuery('.afx').trigger('click',function(){});
    		return false
    	});


});

nokta atışı tarif yapmalısın

dell dediğinde sol taraftaki sürükleme alanı silinmiyor. Gözünden kaçmış sanırım

Hocam her sagdaki ekle butonuna basinca onun alt elemani olacak
Del butonlarina simdilik fonksiyon eklemedim. Ekle butonlarini calistirdiktan sonra bakacaktim

Son durum:http://jsfiddle.net/YgU52/56/

Yok mu daha çok yardımcı olabilecek arkadaşlar

http://jsfiddle.net/YgU52/57/ çözüldü