JSFiddle - React, Tailwind, and code Playground

by Retsam19

HTML

<table>
    <tbody  data-bind ="foreach: additionalOptions">
        <tr>
            <td><input type = "checkbox"class = "optionCheckbox" data-bind="checked: selectedOption"/></td>
            <td data-bind="text: name"></td>
            <td data-bind="text: price" ></td>
        </tr>
     </tbody>
</table>

JavaScript

function addOptions(id,name,price){
    var self = this;
    self.id = id;
    self.name = name;
    self.price = price;
    self.selectedOption = ko.observable(false);
    self.selectedOption.subscribe(function (value) {
        alert((value ? "Checked" : "Unchecked") + " row with id: "+self.id);
    });
}

var vm = {
    additionalOptions: ko.observableArray([new addOptions("idOne", "Foo", 2), new addOptions("idTwo", "Bar", 3)])
}

ko.applyBindings(vm, document.body)