Moving Up and Down Elements of Observable Array in Knockout js

How to move observable array elements up and down on button click in knockout js.

UI Code

<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>

JS code

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);

Here is the link for running sample code.

https://jsfiddle.net/vivek1273/ggrLemd2/