Navigation Creator in ul Structure

by wrxsti85

HTML

<table>
    <tr class="addNavigation">
        <td>
            <label for="Navigation_Items">What pages would you like on the website:</label>
        </td>
        <td>
            <ul class="buildNav">
                <li>
                    <input type="text" name="Navigation_Items" />
                    <button class="addNavigationItem">Add Page</button>
                </li>
            </ul>
        </td>
    </tr>
</table>

JavaScript

$(document).on('click', '.addNavigationItem', function () {
    order = parseInt($(this).siblings('input').attr('name').replace('Navigation[', '').replace(']', '')) + 1;
    $(this).parent().after('<li> \
        <input type="text" name="Navigation[' + order + ']" /> \
        <button class="addNavigationItem">Add Page</button> \
        <button class="addSubNavigationItem makeSub">Make SubPage</button> \
        <button class="removeNavigationItem">Remove Page</button> \
    </li>');
    count = 0;
    $('.buildNav li input').each(function(){
        $(this).attr('name','Navigation[' + count + ']');
        count++;
    });
});

$(document).on('click', '.addSubNavigationItem', function () {
    order = parseInt($(this).siblings('input').attr('name').replace('Navigation[', '').replace(']', '')) + 1;
    if (!$(this).parent().parent().hasClass('subPage') || $(this).hasClass('makeSub')) {
        $(this).parent().wrap('<ul class="subPage" />');
        $(this).text('Undo SubPage');
        count = 0;
        $(this).removeClass('makeSub');
        $('.buildNav li input').each(function(){
            $(this).attr('name','Navigation[' + count + ']');
            count++;
        });
        subCount = 0;
        $('.subPage li input').each(function(){
            currentCount = $(this).attr('name');
            $(this).attr('name',currentCount + '[' + subCount + ']');
            subCount++;
        });
    } else {
        $(this).text('Make SubPage');
        $(this).addClass('makeSub');
        nav = $(this).parent().html();
        val = $(this).siblings('input').val();
        $(this).parent().parent().replaceWith('<li class="added">' + nav  + '</li>');
        $('.added input').val(val);
        $('.added').removeClass('added');
        count = 0;
        $('.buildNav li input').each(function(){
            $(this).attr('name','Navigation[' + count + ']');
            count++;
        });
    }
});

$(document).on('click', '.removeNavigationItem', function ()...