JSFiddle - React, Tailwind, and code Playground

by rjurd

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- ko foreach: items -->
    <input type="checkbox" data-bind="checkedValue: $data, checked: $root.chosenItems" />
    <span data-bind="text: itemName"></span>
<!-- /ko -->
 
<div data-bind="foreach: chosenItems">
   <div data-bind="text: itemName"></div>
</div>

JavaScript

$(function() {
  var viewModel = {
        items: ko.observableArray([
            { id: 1, itemName: 'Choice 1' },
            { id: 2, itemName: 'Choice 2' },
            { id: 3, itemName: 'Choice 3' },
            { id: 4, itemName: 'Choice 4' },
            { id: 5, itemName: 'Choice 5' },
        ]),
        chosenItems: ko.observableArray()
    };

  ko.applyBindings(viewModel);
});