JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<script src="https://rawgit.com/ZiadJ/knockoutjs-reactor/master/knockout.reactor.js"></script>
<input id="checkbox1" type="checkbox" data-bind="
    click: function () { handle_compare($element) },
    checked: is_product_compared">

<label for="checkbox1" class="checkbox">Compare</label>
<br>
<button data-bind="click: function () { handle_compare($element) }">Switch</button>
<br>
Compared: <span data-bind="text: is_product_compared"></span>

JavaScript

test_data = {
    test: 1
};

var ViewModel = null;
ViewModel = ko.mapping.fromJS(test_data);

ViewModel.is_product_compared = ko.observable();

ViewModel.handle_compare = function (element) {
    console.log('before:', ViewModel.is_product_compared.peek());
    
    if (ViewModel.is_product_compared.peek())  {
        ViewModel.is_product_compared(false);
    } else {
        ViewModel.is_product_compared(true);
    }
    
    console.log('after:', ViewModel.is_product_compared.peek());
    
    return true;
};

ko.applyBindings(ViewModel);