Question

Check out this fiddler link With the working Code: KO Example Code

The Idea is to populate them with data then be able to move them back and forth between the two lists.

Answer 1

The populating of the selects works fine for me once I added a resource in jsFiddle to the knockout js file. I used http://knockoutjs.com/js/knockout-1.2.0.js

Ok, I’ve edited my answer and removed most of it once I realised that I’d misunderstood @hyperslug’s reply, and then went and produced pretty much exactly the same code! @hyperslug’s answer, was slightly better than mine as I hadn’t realised that removeAll returns an array of removed items.

In addition to @Hyperslug’s answer, you also have a problem with the enabled state of the buttons. On page load this is solved by

new ko.observableArray(),

instead of

new ko.observableArray([""]),

The latter creates an observable array of length 1 instead of 0.

To get the button enabled status to change after all items have been unchecked, you do seem to need to clear down availHighlight or selectHighlight. removeAll() to the rescue again.
this.availHighlight.removeAll()
or
this.selectHighlight.removeAll()

In answer to why @hyperslug’s $.each() code didn’t work, this is because inside a jQuery each() anonymous function, ‘this’ refers to the item in the collection, not the viewModel instance.

    $.each(removed, function(i,r){
        //'this' is now the same as 'r', so the following line doesn't work as intended
        this.available.push(r);
    });

Hope this helps