nestable-jquery-plugin-add-list-dynamically

HTML

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/102306/jquery.nestable2.js"></script>
<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/102306/jquery.nestable.css">
<button id="appendnestable">Add li</button>

<div class="dd" id="nestable">
    <ol class="dd-list outer">
        <li class="dd-item" data-id="1">
            <div class="dd-handle">Item 1</div>
        </li>
        <li class="dd-item" data-id="2">
            <div class="dd-handle">Item 2</div>
            <ol class="dd-list outer">
                <li class="dd-item addnewlist" data-id="3">
                    <div class="dd-handle">Item 3</div>
                </li>
            </ol>
        </li>
        <li class="dd-item " data-id="4">
            <div class="dd-handle">Item 4</div>
        </li>
        <li class="dd-item" data-id="2">
            <div class="dd-handle">Item 2</div>
            <ol class="dd-list outer">
                <li class="dd-item" data-id="3">
                    <div class="dd-handle">Item 3</div>
                </li>
            </ol>
        </li>

    </ol>
</div>

JavaScript

$('#nestable').nestable();
$('#nestable').nestable('collapseAll');

$(function () {
    var nestablecount = 5;
    
    $('#appendnestable').click(function () {
        var $addnewlist = $('.addnewlist');
        
        // make sure the child <ol> exists
        var $child_ol = $addnewlist.children('ol.dd-list');
        if ( !$child_ol.length ) {
            $child_ol = $('<ol class="dd-list outer"></ol>').appendTo($addnewlist);
        }
        
        $child_ol.append('<li class="dd-item"><div class="dd-handle">Test</div><ol class="dd-list"><li class="dd-item" data-id="'+nestablecount+'"><div class="dd-handle">Item 5</div></li></ol></li>');
        
        //$('#nestable').nestable('reinit');
        
        nestablecount++;
    });
});