JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
<div>Current item: 
    <input type="radio" name="group" data-bind="checked: isMostTerrible, checkedValue: true" />
    <span data-bind="text: isMostTerrible"></span>
</div>

<ul data-bind="foreach: itemsList">
    <li>
        <span data-bind="text: name"></span>
        <input type="radio" name="group" data-bind="checked: isMostTerrible, checkedValue: true" />
        <span data-bind="text: isMostTerrible"></span>
    </li>
</ul>

<button data-bind="click: onAddNewItem">Add new</button>

JavaScript

var item = function(name, dbId) {
  var self = this;
    
    self.dbId = ko.observable(dbId);
    self.name = ko.observable(name);
    self.isMostTerrible = ko.observable(false);
}

var itemList = [
    new item("Taxes", 1),
    new item("Death", 2)
]

var viewModel = function() {
  var self = this;
    
    self.isMostTerrible = ko.observable(true);
    self.itemsList = ko.observableArray(itemList);
    
    self.onAddNewItem = function() {
        // Note - Adding a new item doesn't add a DB ID.
        // (Theoretically occurs on save)
        self.itemsList.push(new item("New item"));
    }
};

ko.applyBindings(viewModel);