JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<ul data-bind="foreach: numbers">
<li>
<span data-bind="text: $data"></span>
<button data-bind="click: $parent.moveUp">Move Up</button>
<button data-bind="click: $parent.moveDown">Move down</button>
</li>
</ul>
TypeScript
function ViewModel() {
var _this = this;
_this.numbers = ko.observableArray(["a", "b", "c", "d", "e"]);
_this.moveDown = function(number) {
var idx = _this.numbers().indexOf(number);
if (idx >= _this.numbers().length) return;
_this.numbers.remove(number);
_this.numbers.splice(idx+1, 0, number)
}
_this.moveUp = function(number) {
var idx = _this.numbers().indexOf(number);
if (idx === 0) return;
_this.numbers.remove(number);
_this.numbers.splice(idx-1, 0, number)
}
}
var vm = new ViewModel();
ko.applyBindings(vm);