JSFiddle - React, Tailwind, and code Playground

by vivek1273

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/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>

JavaScript

function ViewModel() {
    var self = this;
    self.numbers = ko.observableArray(["a", "b", "c", "d", "e"]);
    
    self.moveDown = function(number) {
        var i = self.numbers().indexOf(number);
        if (i < self.numbers().length - 1) {
            var rawNumbers = self.numbers();
            self.numbers.splice(i, 2, rawNumbers[i + 1], rawNumbers[i]);
        }
    }
     self.moveUp = function(number) {
        var i = self.numbers().indexOf(number);
        debugger;
        if (0 < i) {
            var rawNumbers = self.numbers();
            self.numbers.splice(i-1, 2, rawNumbers[i],rawNumbers[i - 1]);
        }
    }
}

var vm = new ViewModel();
ko.applyBindings(vm);