JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<table id="searchTable">
        <thead>
            <tr>
                <th>Data</th>                
            </tr>
        </thead>
        <tbody data-bind="foreach: items">
            <tr class="dataRowItem" data-bind="">
                <td data-bind="    text: Data1"></td>
            </tr>
        </tbody>
</table>

<table id="searchTable">
        <thead>
            <tr>
                <th>SubData</th>                
            </tr>
        </thead>
        <tbody data-bind="foreach: subItems">
            <tr class="dataRowItem" data-bind="">
                <td data-bind="    text: Data2"></td>
            </tr>
        </tbody>
</table>

<input type="button" value="Load SubCollection" id="loadSub" />
<br /><br />
<div>
    output:
    <input type="text" data-bind="      value: fullName" />
</div>

CSS

.selected
{
    background-color:#060669;
}

JavaScript

var collection1 = {"Collection":[{"Data1":'using table 1'}]};
var collection2 = {"SubCollection":[{"Data2":'otherwise use table 2'}]};

 function AppViewModel() {
     var self = this;
     self.items = ko.observableArray();
     self.subItems = ko.observableArray();    
     self.Data1 = ko.observable();
     self.Data2 = ko.observable();     
     //loadData(self, collection1.Collection);     
     //loadSubData(self, collection2.SubCollection);
     
     self.output = ko.observable();
     
     self.fullName = ko.computed(function() {
         if(self.Data1()){
             console.log('using data 1');
             return self.Data1();
         }
         else {
             console.log('using data 2');
             return self.Data2();
         }
         
     }, self);
         self.Data1 = ko.observable().extend({
                isServerSet: false
     });      
     self.Data2 = ko.observable().extend({
                isServerSet: false
     });  
    
    // updateSelectedItemViewModel(self);
     $('#loadSub').click(function() {
        self.Data1('value set'); 
     });
 }

function updateSelectedItemViewModel(self) {
    console.log('observable array: ' + self.items()[0].Data1);
    //self.fullName('');
    self.Data1(self.items()[0].Data1);
    self.Data2(self.subItems()[0].Data2);
    console.log('computed result: ' + self.fullName());
}

function loadData(self, collection) {
    $.each(collection, function (i, val) {
        console.log(val);
        self.items.push(val);
    });
}

function loadSubData(self, collection) {
    $.each(collection, function (i, val) {
        console.log(val);
        self.subItems.push(val);
    });
}

ko.applyBindings(new AppViewModel());