JSFiddle - React, Tailwind, and code Playground

HTML

<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

$.getScript("//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js", function () {
    /* Lines of code */
    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)
        }];

        var ids = this.fruits.map(function(v){
            return v.Id;
        });
        
        console.log(ids);

        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);
})