mvvm editor Fail

HTML

<link rel="stylesheet" href="https://aligntoday.com/Kendo/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://aligntoday.com/Kendo/styles/kendo.flat.min.css">
<script src="https://aligntoday.com/Kendo/js/jquery.min.js"></script>
<script src="https://aligntoday.com/Kendo/js/kendo.all.min.js"></script>
<div id='container'>

    <textarea data-role="editor" data-bind="value: myValue" ></textarea>
    
</div>

JavaScript

var $container = $('#container');

var textAreas = [];

$.each($container.find('[data-role=editor]'), function (index, item) {
    textAreas.push({
        text: item.outerHTML,
        parent: $(item).parent()
    });
});

var vm = new kendo.observable({
    myValue:"Hello",
    destroyEditors: function () {
        $.each($container.find('[data-role=editor]'), function (index, item) {
            var $item = $(item);
            $item.data('kendoEditor').destroy();
            $item.closest('table').remove();
        });
    },
    createEditors: function () {
        $.each(textAreas, function (index, item) {
            var $new = $(item.text).prependTo(item.parent);            
        });
        
        kendo.bind($container, vm);
    }
});


kendo.bind($container, vm);

//vm.destroyEditors();
vm.createEditors();