JSFiddle - React, Tailwind, and code Playground

by Sergio Sánchez

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.1.0.js"></script>
Bathrooms
<div>
    <label data-bind="foreach: Bathrooms" >
        <input type="radio" data-bind="checked: $root.SelectedBathroom, attr:{ value: $data}, click: $root.SendFacet "></input>
        <span data-bind="text:$data"></span>
    </label>    
</div>
<button onclick="changeBaths();">Change Bathrooms</button>

JavaScript

var NeighborhoodModel = function () {
    var self = this;
    self.Bathrooms =  ko.observableArray([]);
    self.SelectedBathroom = ko.observable("");
    
    self.Reset = function ()
    {
       self.Bathrooms.removeAll();
       self.SelectedBathroom("");        
    }
    
    self.Load = function ()
    {
        self.Bathrooms.push("1");
        self.Bathrooms.push("2");
        self.Bathrooms.push("3");
        self.Bathrooms.push("4");
        self.SelectedBathroom("2");             
    }   
    self.SendFacet = function ()
    {
        alert(ko.toJSON(self));
     //   alert(self.Facet.SelectedBathroom());
        
    }
    self.Load2 = function ()
    {
        self.Bathrooms.push("1");
        self.Bathrooms.push("2");
        self.Bathrooms.push("3");
        self.Bathrooms.push("4");
        self.Bathrooms.push("5");
        self.Bathrooms.push("6");
        self.SelectedBathroom("3");             
    }   
}
var nm = new NeighborhoodModel();
ko.applyBindings(nm);
nm.Load();
    
        
function changeBaths()
{
  
    nm.Reset();
    nm.Load2();
}