JSFiddle - React, Tailwind, and code Playground

HTML

<!--ko template: { name: 'multiCheckBtn', data: { elems: posGenders, compareWith: gender, switch: switchCheckBtn} }-->
<!--/ko-->

<script id="multiCheckBtn" type="text/html">
  <span class="fakeCheck" data-bind="foreach: { data: $data.elems, as: 't' } ">
    
    <span class="btn" data-bind="text: t, css: { selected: t == $parent.compareWith() }, click: $parent.switch"></span>
  </span>
</script>

CSS

.selected{
    color: red;
}

JavaScript

var listOfFruits = new []{};
var listOfBerries = new []{"strawberry","cloudberry","blueberry"}


function ViewModel(){
    var self = this;
    
    self.fruits = ko.observableArray(["apple","banana","orange"]);
    self.gender = ko.observable("Female");
    
    self.switchCheckBtn = function(){
        console.log("Clicked");
    };
}

ko.applyBindings(new ViewModel());