JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<select
    data-bind="
        options: data,
        optionsText: 'Name',
        optionsValue: dataValueSelect,
        optionsCaption: 'Select ...',
        value: dataSelectedId" ></select>

<div data-bind="with: dataSelected" style="border: 1px solid red;">
    Selected element name: <span data-bind="text: Name"></span><br />
    Selected element id: <span data-bind="text: Id"></span><br />
    Selected element value: <span data-bind="text: $root.dataSelectedId"></span>
</div>

<div data-bind="with: dataSelectedCO" style="border: 1px solid green;">
    Selected element name: <span data-bind="text: Name"></span><br />
    Selected element id: <span data-bind="text: Id"></span><br />
    Selected element value: <span data-bind="text: $root.dataSelectedId"></span>
</div>

<div id="log"></div>

JavaScript

function Item(id, name) {
    var self = this;
    
    self.Name = ko.observable(name);
    self.Id = ko.observable(id);
};

function ViewModel() {
    var self = this;
    
    self.dataSelected = ko.observable();
    self.dataSelectedId = ko.observable();
    self.dataValueSelect = function (item) {
        $("#log").html( "selecting " + item.Id() + "<br />" + $("#log").html());
        self.dataSelected(item);
        return item.Id();
    }
    self.data = ko.observableArray([
        new Item(10, 'item 10'),
        new Item(11, 'item 11'),
        new Item(123, 'item 123')]);        
    self.dataSelectedCO = ko.computed(function() {
        for (var i = 0; i < self.data().length; ++i)
            if (self.data()[i].Id() == self.dataSelectedId())
                return self.data()[i];
    });
};

ko.applyBindings(new ViewModel());