On click button to swap array values in table do not bind in knockout js?

I am new to knockoutjs. I am creating a table with racers. I can show racer events, but i want to change the position of the racer in the table manually by click button. They perform swap function, but they do not bind values in the table. Without using click action data bind in table with swapping value.
my sample coding is here,

var PlanetsModel = function() {
    self.Racer = ko.observableArray([
        { id: "Racer-101", rank: "5"},
        { id: "Racer-102", rank: "2"},
        { id: "Racer-103", rank: "1"},
        { id: "Racer-104", rank: "4"},
        { id: "Racer-105", rank: "7"},
        { id: "Racer-106", rank: "8"},
        { id: "Racer-107", rank: "9"},
        { id: "Racer-108", rank: "3"},
        { id: "Racer-109", rank: "6"}
    ]);
 
    this.typeToShow = ko.observable("all");
    this.displayAdvancedOptions = ko.observable(false);
	//console.log(self.Racer()[5].rank);    //find particular racer rank value
    
	//setTimeout(function () {
		this.addPlanet = function(type) {
			self.Racer.push({
				id: "New planet",
				rank: type
			});
		};
		console.log(this.addPlanet);
	//}, 4000);
    this.showRacer = ko.computed(function() {
       return self.Racer();        
	}, this);
	var newData = self.Racer();
	console.log("First array : " + JSON.stringify(newData));
	
	/* swap array values based on temp variable */
	self.moveup = function() {
		function swap(input, index_A, index_B) {
			var temp = input[index_A];
			 
			input[index_A] = input[index_B];
			input[index_B] = temp;
		}	 
		swap(self.Racer(), 0, 1);
		console.log("swap value");
		console.log(JSON.stringify(self.Racer()));
	}
    // Animation callbacks for the planets list
    this.showPlanetElement = function(elem) { if (elem.nodeType === 1) $(elem).hide().slideDown() }
    this.hidePlanetElement = function(elem) { if (elem.nodeType === 1) $(elem).slideUp(function() { $(elem).remove(); }) }
};
ko.applyBindings(new PlanetsModel());

Select allOpen in new window

In this method they cannot bind values after click button. my html code is here,

<button type="button" data-bind="click: moveup">Swap Item</button>

	<div data-bind='template: { foreach: showRacer }'>
        <div style="width: 50%;" data-bind='attr: { "class": "planet "}'>
			<div class="left" data-bind='text: id'></div>
			<div class="right" data-bind='text: rank'></div>
		</div>
    </div>

Select allOpen in new window

This is my problem for swap table values after click button event, Without using button to perform display table with swap function correctly. what is the problem in my code, with how to bind values after click event..