knockout demo Deleting widget issue

fix for #1015

TODO: udated demo to make it easier to debug/fix. I don't see the arraw changing order going 1 column. not sure of issue yet..

Author: Alain Dumesny

demo/knockout.html

@@ -10,14 +10,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Knockout.js demo</title>
 
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css">
   <link rel="stylesheet" href="../dist/gridstack.css"/>
 
-  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
-  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.6.9/shim.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.6.9/shim.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-debug.js"></script>
   <script src="../src/gridstack.js"></script>
   <script src="../src/gridstack.jQueryUI.js"></script>
 
@@ -77,8 +77,8 @@ <h1>knockout.js Demo</h1>
       template:
         [
           '<div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}">',
-          '   <div class="grid-stack-item" data-bind="attr: {\'data-gs-x\': $data.x, \'data-gs-y\': $data.y, \'data-gs-width\': $data.width, \'data-gs-height\': $data.height, \'data-gs-auto-position\': $data.auto_position}">',
-          '     <div class="grid-stack-item-content"><button data-bind="click: $root.deleteWidget">Delete me</button></div>',
+          '   <div class="grid-stack-item" data-bind="attr: {\'data-gs-x\': $data.x, \'data-gs-y\': $data.y, \'data-gs-width\': $data.width, \'data-gs-height\': $data.height, \'data-gs-auto-position\': $data.auto_position, \'data-gs-id\': $data.id}">',
+            '     <div class="grid-stack-item-content"><button data-bind="click: $root.deleteWidget">Delete me</button></div>',
           '   </div>',
           '</div> '
         ].join('')
@@ -108,10 +108,10 @@ <h1>knockout.js Demo</h1>
       };
 
       var widgets = [
-        {x: 0, y: 0, width: 2, height: 2},
-        {x: 2, y: 0, width: 4, height: 2},
-        {x: 6, y: 0, width: 2, height: 4},
-        {x: 1, y: 2, width: 4, height: 2}
+        {x: 0, y: 0, width: 2, height: 2, id: '0'},
+        {x: 2, y: 0, width: 4, height: 2, id: '1'},
+        {x: 6, y: 0, width: 2, height: 4, id: '2'},
+        {x: 1, y: 2, width: 4, height: 2, id: '3'}
       ];
 
       var controller = new Controller(widgets);