JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div id="items" data-bind="template: { foreach: items }">
  <div data-bind="text: $data"></div>
</div>
<button data-bind="click: reorder_array">Reorder array</button>
<button data-bind="click: reorder_dom">Reorder DOM</button>
<div>
  Reorder the array twice, then reorder DOM twice. This should work as expected, and end up with the initial state.
  Then, try to reorder the array again. It should not work. Why?
</div>

JavaScript

let vm = {
	items: ko.observableArray(['item1', 'item2']),
  reorder_array() {
  	vm.items([vm.items()[1], vm.items()[0]]);
  },
  reorder_dom() {
  	let parent = document.querySelector('#items');
    let nexts = [parent.children[0].nextSibling, parent.children[1].nextSibling];
    parent.insertBefore(parent.children[1], nexts[0]);
    parent.insertBefore(parent.children[0], nexts[1]);
  }
};
ko.applyBindings(vm);