JSFiddle - React, Tailwind, and code Playground

by infiniteloops

HTML

<div style="width: 400px; border: 0px; margin: 0px; padding: 0px;">
    <span>Select the brands that are featured in this proposal.</span>
<table cellpadding="0" cellspacing="0" border="0" width="198" style="display: inline-block">
        <!-- ko foreach: {data: VendorSelection.VendorList, as: 'vendor'} -->
        <!-- ko if: $root.VendorSelection.VendorList.indexOf(vendor) % 2 == 0 -->
            <!-- ko template: {name: 'itemTemplate', data: vendor} --><!-- /ko -->
        <!-- /ko -->                           
        <!-- /ko -->
    </table> 
    <table cellpadding="0" cellspacing="0" border="0" width="198" style="display: inline-block; vertical-align: top;">
        <!-- ko foreach: {data: VendorSelection.VendorList, as: 'vendor'} -->
        <!-- ko if: $root.VendorSelection.VendorList.indexOf(vendor) % 2 == 1 -->
            <!-- ko template: {name: 'itemTemplate', data: vendor} --><!-- /ko -->
        <!-- /ko -->                           
        <!-- /ko -->
    </table> 
</div>
<script type='text/html' id='itemTemplate'>
     <tr>
            <td>
                <input type="checkbox" data-bind="attr: { id: VendorID }, checked: $root.VendorSelection.SelectedVendors, value: Name"/>
            </td>
            <td> 
                <span data-bind="text: Name"></span>                    
            </td>
    </tr>
</script>

JavaScript

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

var v1 = new Vendor(1, "Test1");
var v2 = new Vendor(2, "Test2");
var v3 = new Vendor(3, "Test3");
var v4 = new Vendor(4, "Test4");
var v5 = new Vendor(5, "Test5");

var model = {
    VendorSelection: {
        VendorList: ko.observableArray([v1, v2, v3, v4, v5]),
        SelectedVendors: ko.observableArray(["Test1", "Test4"])
    }
}

ko.applyBindings(model);