JSFiddle - React, Tailwind, and code Playground

by falkone

HTML

<div>
				<div id="sideA">
					<div data-bind="foreach: AllBooks" >
            			<label>
                			<input type="checkbox" name="checkedBook" data-bind="value: bookName, checked:$root.selectedBookNames" />
                			<span data-bind="text: bookName" ></span>
            			</label> 
        			</div>
        			<label><input type="checkbox" data-bind="checked: AllChecked" />Check all</label>
           			<br> Selected
        			<div data-bind="foreach: SelectedBooks">
            			<p>
                			<span data-bind="text: bookName" ></span>
            			</p>
        			</div> 
				</div>
			</div>
			<div>
				<div id="sideB">
					<div data-bind="foreach: AllUsers" >
            			<label>
                			<input type="checkbox" name="checkedUser" data-bind="value: userName, checked:$root.selectedUserNames" />
                			<span data-bind="text: userName" ></span>
            			</label> 
        			</div>
        			<label><input type="checkbox" data-bind="checked: AllChecked" />Check all</label>
           			<br> Selected
        			<div data-bind="foreach: SelectedUsers">
            			<p>
                			<span data-bind="text: userName" ></span>
            			</p>
        			</div> 
				</div>
			</div>
			<div>
				<div data-bind="foreach: SelectedUsers">
            		<p>
                		<span data-bind="text: $root.userName" ></span>
            		</p>
        		</div> 
			</div>

JavaScript

function Book(data) {
    this.bookName = ko.observable(data.bookName);
    this.selected = ko.observable(data.selected);

}

var dataBook = [new Book({bookName: "Js", selected: false}),
    new Book({bookName: "Css", selected: false})
    ];

function BooksViewModel() {
    var self = this;
    self.AllBooks = ko.observableArray(dataBook);
    self.SelectedBooks = ko.observableArray([]);
    
    self.selectedBookNames = ko.observableArray([]);
    
    self.selectedBookNames.subscribe(function(newValue) {
        var newSelectedBookNames = newValue;
        var newSelectedBooks = [];
        ko.utils.arrayForEach(newSelectedBookNames, function(bookName) {
            var selectedBook = ko.utils.arrayFirst(self.AllBooks(), function(book) {
                return (book.bookName() === bookName);
            });
            newSelectedBooks.push(selectedBook);
        });
        self.SelectedBooks(newSelectedBooks);
    });

    self.AllChecked = ko.computed({
        read: function() {
            var firstUnchecked = ko.utils.arrayFirst(dataBook, function(item) {
                return self.selectedBookNames().indexOf(item.bookName()) == -1;
            });
            return firstUnchecked == null;
        },
        write: function(value) {
            if (value)
            {
                ko.utils.arrayForEach(dataBook, function(item) {
                    if (self.selectedBookNames().indexOf(item.bookName()) == -1)
                        self.selectedBookNames.push(item.bookName());
                });
            }
            else
                self.selectedBookNames.removeAll();
        }
    })
}
ko.applyBindings(new BooksViewModel(), document.getElementById('sideA'));

function User(data) {
    this.userName = ko.observable(data.userName);
    this.selected = ko.observable(data.selected);

}

var dataSource = [new User({userName: "Bill", selected: false}),
    new User({userName: "Andrii", selected: false})
    ];

function UsersViewModel() {
   ...