JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<ul data-bind="foreach: all">
    <li>
        <span data-bind="text: id"></span>
        <span data-bind="visible: isSelected">(selected)</span>
    </li>
</div>

JavaScript

function Item(id) {
    var that = this;
    this.id = id;
    this.isSelected = ko.observable(false);
}

function Panel() {
    var that = this;
    
    //my two lists
    this.all = ko.observableArray();
    this.selected = ko.observableArray();                                      
}

var panel = new Panel();
ko.applyBindings(panel);

function select(item){
    panel.selected.push(item);
    var itemInAll = _(panel.all()).find(function(thing){
        console.log("iterating");
        return thing.id === item.id;
    });
    itemInAll.isSelected(true);
}

//add some things to the list
for(var i=0; i<40; i++){
    var item = new Item(i)
    panel.all.push(item);
    //let's select some of them. note it's actually a different object
    if (i % 2 == 0){
        select(new Item(i));
    }
};