How to append row in panel in jQuery?

Question

can you please tell me how to append row in panel which is collapsible row (can be expand),I am able to append but it s not expand.

I am getting this error while doing this step. First click icon on << it open the left panel .Then I click add button it generate a row as well as it generate submenu of firstLevel.Then press + button it expand .but when you click add button again it generate another row and submenu but it is not expandable while click on + button?
http://jsfiddle.net/eHded/1549/

function addInmenu(id){
 alert(id)   
     var menuid="menu_"+id;
    // var data = $('#menuId li').html();
 $('#menuId  li').append('<ul><li id=' + menuid + '><a>'+menuid+'</a></li></ul>');
     $('.tree li').each(function () {
        if ($(this).children('ul').length > 0) {
            $(this).addClass('parent');
        }
    });
$('.tree li.parent > a').on('click',function () {
    //alert('--')
        $(this).parent().toggleClass('active');
        $(this).parent().children('ul').slideToggle('fast');
    });

}

Answer 1

Here is your code working in jsfiddle

function addInmenu(id){ 
   var menuid="menu_"+id;
   // var data = $('#menuId li').html();

   $('#menuId li:first ').append('<ul><li id=' + menuid + '><a>'+menuid+'</a></li> </ul>');
   $('.tree li').each(function () {
     if ($(this).children('ul').length > 0) {
        $(this).addClass('parent');
     }
   });
   $('.tree li.parent > a').unbind("click");
   $('.tree li.parent > a').on('click',function () {
   //alert('--')
    $(this).parent().toggleClass('active');
    $(this).parent().children('ul').slideToggle('fast');
   });
}


$('#add').click(function () {
  var listItems = $("#ultest").children();
  var id;
  if (typeof ($("#ultest li:last").attr('id')) == 'undefined') {
    //alert('undefint');
    id = "tc_1"
  } else {
    id = $("#ultest li:last").attr('id');
    var index = id.indexOf("_");
    var count = id.substring(index + 1, id.length)
    count = parseInt(count);


    id = id.substring(0, index) + "_" + parseInt(count + 1);
   // alert(id)
  }

  if ($('.tree li.parent').hasClass('active')){        
    $('.tree li.parent').toggleClass('active');
    $('.tree li.parent').children('ul').slideToggle('fast');
  }
  $('#ultest').append('<li id=' + id + '><a href="#" class="foo">' + id + '</a></li>');
    //$('#ultest').listview('refresh');
    addInmenu(id);
});

UPDATED:

here is updated fiddle for reference jsfiddle here