Moving Up and Down Elements of Observable Array in Knockout js

UI Code

  1. <ul data-bind="foreach: numbers">  
  2.     <li>  
  3.         <span data-bind="text: $data"></span>  
  4.         <button data-bind="click: $parent.moveUp">Move Up</button>  
  5.         <button data-bind="click: $parent.moveDown">Move down</button>  
  6.     </li>  
  7. </ul>  

JS code

  1. function ViewModel() {  
  2.     var self = this;  
  3.     self.numbers = ko.observableArray(["a""b""c""d""e"]);  
  4.       
  5.     self.moveDown = function(number) {  
  6.         var i = self.numbers().indexOf(number);  
  7.         if (i < self.numbers().length - 1) {  
  8.             var rawNumbers = self.numbers();  
  9.             self.numbers.splice(i, 2, rawNumbers[i + 1], rawNumbers[i]);  
  10.         }  
  11.     }  
  12.      self.moveUp = function(number) {  
  13.         var i = self.numbers().indexOf(number);  
  14.         debugger;  
  15.         if (0 < i) {  
  16.             var rawNumbers = self.numbers();  
  17.             self.numbers.splice(i-1, 2, rawNumbers[i],rawNumbers[i - 1]);  
  18.         }  
  19.     }  
  20. }  
  21.   
  22. var vm = new ViewModel();  
  23. ko.applyBindings(vm);  

Here is the link for running sample code.

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