I'm having an issue with nestable.js and maybe I'm using the callback incorrectly. Below is my current code and I'm loading the JSON from the php variable $primary_menu_json that is passed into the function. It creates the menu with no issues and I can move my menu elements around that are created from the JSON no problem, but it's not updating my hidden textarea (#nestableOutput) on the callback.

The way I understand the callback from the documentation is it's fired when elements are reordered or nested. In my mind this would be the place to update the hidden textarea when an element is dropped. Maybe I am wrong in this thinking. Any help?

    $(document).ready(function () {

        function nestableJSON(jsonArray, root) {

            if (typeof root === 'undefined') {
                root = $('body');
            }
            var $div = $('<div id="nestable02a" class="dd" data-plugin="nestable"><ol class="dd-list dd3-list"></ol></div>');
            root.append($div);

            for(var i = 0; i < jsonArray.length; i++) {
                var $li = $("<li class='dd-item dd-item-alt' id='item-" + jsonArray[i].id + "' data-id='" + jsonArray[i].id + "' data-title='" + jsonArray[i].title + "'><div class='dd-handle'></div><div class='dd-content'>" + jsonArray[i].title + "<span class='float-right wb-trash'></span></div></li>");
                root.find('ol.dd-list:first').append($li);

                if (typeof jsonArray[i].children !== 'undefined') {
                    nestableJSON(jsonArray[i].children, $li);
                }
            }

            $('#nestable02a').nestable({
                group: 1,
                maxDepth: 3,
                callback: function(e){
                    var list = e.length ? e : $(e.target);
                    $('#nestableOutput').text(window.JSON.stringify(list.nestable('serialize')));
                    console.log('json updated');
                }
            });

        }
        nestableJSON(<?php echo $primary_menu_json; ?>);
    });