JSFiddle - React, Tailwind, and code Playground

by Jeroen Heijmans

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<div id="dayGroup" data-bind="foreach: dowArr" class="btn-group input-group input-append" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="checkbox" data-bind="bsChecked: isChecked" autocomplete="off"/>
        <span data-bind="text: day"></span>
        <span data-bind="text: isChecked"></span>
    </label>
</div>
<hr>
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

JavaScript

var vm = {
  dowArr: ko.observableArray([])
};

vm.dowArr.push({ day: 'MON', dow: 1, isChecked: ko.observable(true) });
vm.dowArr.push({ day: 'TUE', dow: 2, isChecked: ko.observable(false) });

ko.applyBindings(vm);