JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-1.3.0beta.js"></script>
<ul data-bind="foreach: fruits">
    <li>        
        <input type="checkbox" data-bind="checked: selected" />
        <span data-bind="text: Description"></span>        
    </li>      
</ul>         

<div data-bind="foreach : selectedFruits"><span data-bind="text : Description"></span>
</div>

CSS

ul { text-align: left }
li { padding: 4px; }
li:nth-child(2n) { background-color: #e5e5e5; }

JavaScript

function myViewModel() {
    this.fruits = [
        {
        "Id": 5,
        "Description": "Apple",
        selected: ko.observable(false)},
    {
        "Id": 4,
        "Description": "Orange",
        selected: ko.observable(false)},
    {
        "Id": 3,
        "Description": "Banana",
        selected: ko.observable(false)},
    {
        "Id": 2,
        "Description": "Pineapple",
        selected: ko.observable(false)},
    {
        "Id": 6,
        "Description": "Kiwi",
        selected: ko.observable(false)},
    {
        "Id": 7,
        "Description": "Peach",
        selected: ko.observable(false)}
    ];



    this.selectedFruits = ko.dependentObservable(function() {
        var arr = $.grep(this.fruits, function(item) {
            return item.selected();
        });
        return arr;
    }, this);

    return this;
}

var vm = new myViewModel();
ko.applyBindings(vm);