JSFiddle - React, Tailwind, and code Playground

by Thor Arne Johansen

HTML

<table class="space">
    <tr data-bind="foreach: $data.beforeAnswers">
        <td> <span data-bind="text: id+selected"></span>
            <input type="radio" data-bind="value: selected, checked: selected, checkedValue: 'on', disable: $root.noTransport, attr: {name: buttongroup}" />
        </td>
    </tr>
</table>

JavaScript

var Answer = function (id, parentid, name, selected, group) {
    var self = this;

    self.id = id;
    self.selected = selected;
    self.buttongroup = group;
    self.beforeParentId = "before" + parentid;
    self.afterParentId = "after" + parentid;
    self.name = ko.observable(name);
    self.beforeSelected = ko.observable(false);
    self.afterSelected = ko.observable(false);
    self.afterSelected.subscribe(function(newVal){
        debugger;
        var a = newVal;    
    });
};

var Viewmodel = function () {
    var self = this;

    self.noTransport = false;
    self.beforeSelected = ko.observable("");
    self.beforeAnswers = ko.observableArray([
    new Answer(1, 77, "Strongly Disagree", "off", "b1"),
    new Answer(2, 77, "Disagree", "off", "b1"),
    new Answer(3, 77, "Neutral", "off", "b1"),
    new Answer(4, 77, "Agree", "on", "b1"),
    new Answer(5, 77, "Strongly Agree", "off", "b1")]);
       
};

var vm = new Viewmodel();
ko.applyBindings(vm);