JSFiddle - React, Tailwind, and code Playground

by Jon Kittell

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
Eligible States:
<div data-bind="foreach: $root.eligibleStates">
    <input type="checkbox" data-bind="value: $root.name, click: $root.toggleAssociation" />	
    <span data-bind="text: name"></span>
    <br/>
</div>
<br/>
<br/>
Selected States:
<div data-bind="foreach: $root.selectedStates">
    <div><span data-bind="text: name" />
    </div>
</div>

JavaScript

$(function () {

    function ViewModel() {
        var self = this;
        self.eligibleStates = ko.observableArray([{
            name: 'Alabama',
            selected: ko.observable(false)
        }, {
            name: 'Florida',
            selected: ko.observable(false)
        }, {
            name: 'Texas',
            selected: ko.observable(false)
        }]);

        self.selectedStates = ko.computed(function () {
            return self.eligibleStates().filter(function (item) {
                return item.selected();
            });
        });
        
        self.toggleAssociation = function(item) {
            item.selected(!(item.selected()));
            return true;
        };
    }
    
    ko.applyBindings(new ViewModel());

});