JQuery in dropdown menu

Question

I'm using such a script for the mobile menu of my website:

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('ul#menu > li').on('click', function(e) { 
        //console.log("root"); 
        e.preventDefault(); 

        var cat = $(this).attr('id'); 
        if ($(this).hasClass('open')) {
        console.log("remove: " + cat); 
            $(this).removeClass('open');
            $('#menu #sub1').remove(); 
            $('#menu > #'+ cat +' > a > i').removeClass('fa-angle-down');
        } else {
            var url = 'index.php?route=test/categoryx/child&section=' + section + '&category_id=' + cat; 

            $(this).addClass('open');
            $('#menu #sub1').remove(); 
            $('#menu > #'+ cat +' > a > i').toggleClass('fa-angle-down');
            $( $("<ul class='submenu' id='sub1'>").load(url + "#myContainer") )
            .insertAfter( $( '#menu #' + cat + ' a') );
        }
clicked == 'sub';            
    });

//console.log("clicked: " + clicked); 
    $("#menu").on("click", "#sub2 li a", function(e) { 
        e.preventDefault(); 
        var _leaf = $(this).attr('class'); 
        if (_leaf == 'leaf') {

        } else {
            if ($(this).hasClass('open')) {
                $(this).removeClass('open');
                $('#menu #sub3').remove(); 
                $('#menu #sub2 > #'+ cat +' > a > i').removeClass('fa-angle-down');
            } else {
                var url = 'index.php?route=test/categoryx/child&section=' + section + '&category_id=' + cat; 

                $(this).addClass('open');
                $('#menu #sub3').remove(); 
                $('#menu #sub2 > #'+ cat +' > a > i').toggleClass('fa-angle-down');
                $( $("<ul class='submenu' id='sub3'>").load(url + "#myContainer") )
                .insertAfter( $( '#menu #' + cat + ' a') );
            }
        }
    }); 

    var section = "<?php echo $section; ?>"; 
console.log("section: " + section); 
    var clicked = 'root';

    $("ul#menu > li").on("click", "#sub1 li", function(e) { 
        e.preventDefault(); 

        clicked = 'sub';
        var cat = $(this).attr('id'); 
        var _leaf = $(this).attr('class'); 
        if (_leaf == 'leaf') {

        } else {
            if ($(this).hasClass('open')) {
                $(this).removeClass('open');
                $('#menu #sub2').remove(); 
                $('#menu #sub1 > #'+ cat +' > a > i').removeClass('fa-angle-down');
            } else {
                var url = 'index.php?route=test/categoryx/child&section=' + section + '&category_id=' + cat; 

                $(this).addClass('open');
console.log("sub: " + cat); 
                $('#menu #sub2').remove(); 
                $('#menu #sub1 > #'+ cat +' > a > i').toggleClass('fa-angle-down');
                $( $("<ul class='submenu' id='sub2'>").load(url + "#myContainer") )
                .insertAfter( $( '#menu #sub1 #' + cat + ' a') );
            }
        }
    });
console.log("clicked: " + clicked); 
});
</script> 

In first level (root) it works fine and shows submenu 1.
By clicking on any submenu 1 links, instead of showing submenu 2, it closes submenu 1. I tried different approaches but unfortunately the same result.

Answer 1

SOLVED

I solved the problem as below by some fixings in the script:

<script type="text/javascript"> 
$(document).ready(function(){ 
    var section = "<?php echo $section; ?>"; 
    console.log("section: " + section); 

    $('ul#menu > li').on('click', function(e) { 
        e.preventDefault(); 
        var cat = $(this).attr('id'); 
        var url = 'index.php?route=test/categoryx/child&section=' + section + '&category_id=' + cat; 

        $('#menu #sub1').remove(); 
        if ($(this).hasClass('open')) {
            $(this).removeClass('open');
            $('#menu > #'+ cat +' > a > i').removeClass('fa-angle-down');
        } else {
            $(this).addClass('open');
            $('#menu > #'+ cat +' > i').toggleClass('fa-angle-down');
            $( $("<ul class='submenu' id='sub1'>").load(url + "#myContainer") ).insertAfter( $( '#menu #' + cat) );
        }
    });

    $("#menu").on("click", "#sub1 li", function(e) { 
        var _leaf = $(this).attr('class'); 
        if (_leaf == 'leaf') {

        } else {
            e.preventDefault(); 
            var cat = $(this).attr('id');
            var url = 'index.php?route=test/categoryx/child&section=' + section + '&category_id=' + cat; 

            $('#menu #sub2').remove(); 
            if ($(this).hasClass('open')) {
                $(this).removeClass('open');
                $('#menu #sub1 > #'+ cat +' > i').removeClass('fa-angle-down');
            } else {
                $(this).addClass('open');
                $('#menu #sub1 > #'+ cat +' > i').toggleClass('fa-angle-down');
                $( $("<ul class='submenu' id='sub2'>").load(url + "#myContainer") ).insertAfter( $( '#menu #' + cat) ); 
            }
        }
    });

    $("#menu").on("click", "#sub2 li", function(e) { 
        var _leaf = $(this).attr('class'); 
        if (_leaf == 'leaf') {

        } else {
            e.preventDefault(); 
            var cat = $(this).attr('id');
            var url = 'index.php?route=test/categoryx/child&section=' + section + '&category_id=' + cat; 

            $('#menu #sub3').remove(); 
            if ($(this).hasClass('open')) {
                $(this).removeClass('open');
                $('#menu #sub2 > #'+ cat +' > i').removeClass('fa-angle-down');
            } else {
                $(this).addClass('open');
                $('#menu #sub2 > #'+ cat +' > i').toggleClass('fa-angle-down');
                $( $("<ul class='submenu' id='sub3'>").load(url + "#myContainer") ).insertAfter( $( '#menu #' + cat) ); 
            }
        }
    }); 
});