JSFiddle - React, Tailwind, and code Playground

HTML

<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>
        Selected
        <div data-bind="foreach: SelectedUsers">
            <p>
                <span data-bind="text: userName" ></span>
            </p>
        </div>
            <label><input type="checkbox" data-bind="click: AllChecked" />Check all</label>
    </div>

JavaScript

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() {
    var self = this;
    self.AllUsers = ko.observableArray(dataSource);
    self.SelectedUsers = ko.observableArray([]);
    
    self.selectedUserNames = ko.observableArray([]);
    
    self.selectedUserNames.subscribe(function(newValue) {
        var newSelectedUserNames = newValue;
        var newSelectedUsers = [];
        ko.utils.arrayForEach(newSelectedUserNames, function(userName) {
            var selectedUser = ko.utils.arrayFirst(self.AllUsers(), function(user) {
                return (user.userName() === userName);
            });
            newSelectedUsers.push(selectedUser);
        });
        self.SelectedUsers(newSelectedUsers);
    });

    self.AllChecked = function(){
    	read: function() {
    		var firstUnchecked = ko.utils.arrayFirst(dataSource, function(item) {
    			return self.selectedUserNames().indexOf(item.userName()) == -1;
    		});
    		return firstUnchecked == null;
    	},
    	write: function(value) {
            if (value)
            {
                ko.utils.arrayForEach(dataSource, function(item) {
                    self.selectedUserNames.push(item.userName());
                });
            }
            else
                self.selectedUserNames.removeAll();
    	}
    }
}
ko.applyBindings(new UsersViewModel(), document.getElementById('sideB'));