JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<div data-bind="foreach: categories">
    <div>
        <label>
            <span data-bind="text: name"></span>
            <input class="checkbox" type="checkbox" data-bind="value: id, checked: $root.item">
         </label>
    </div>
</div>
    
<div data-bind="text: ko.toJSON(item)"></div>

JavaScript

function vm() {
    var self = this;
    
    self.categories = [
        {id: "1", name: "Category 1"},  
        {id: "2", name: "Category 2"},  
        {id: "3", name: "Category 3"}
    ];

    // Assume this item came from server side, 
    var rawItem = { links: ["1"] };
    self.item = ko.observableArray(rawItem.links);
}

ko.applyBindings(new vm());