JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Blackberry Items</h2>
 <span>NumUsers: </span>

<input type="number" data-bind="value:blackberryNumUsers" />&nbsp;&nbsp;&nbsp;&nbsp;
<br/>
<br/> <strong> Options: </strong>

<br/>
<ul data-bind="foreach: blackberryItems">
    <li>
        <div>
            <input type="radio" name="group1" data-bind="attr: { id: displayName, value: name }, checked: $parent.blackberryOption">
                <span data-bind="text: name" />
            </input>
        </div>
    </li>
</ul>

JavaScript

var Option = function (name, price, displayName, fullDisplayName) {
	    var self = this;

	    self.name = ko.observable(name);
	    self.price = ko.observable(price);
	    self.displayName = ko.observable(displayName);
	    self.fullDisplayName = ko.observable(fullDisplayName);
	}

	var blackBerryOptions = [
	new Option(
	    "Option A",
	10,
	    "BlckBrry[A]",
	    "Blackberry: Option A"),
	new Option(
	    "Option B",
	20,
	    "BlckBrry[B]",
	    "Blackberry: Option B"),
	new Option(
	    "Option C",
	30,
	    "BlckBrry[C]",
	    "Blackberry: Option C"),
	new Option(
	    "Option D",
	40,
	    "BlckBrry[D]",
	    "Blackberry: Option D")
    ];

	var viewModel = function () {
	    var self = this;
	   self.blackberryOption = ko.observable('Option A');
	    self.blackberryNumUsers = ko.observable(10);
	    self.blackberryItems = blackBerryOptions;

	    self.blackberryNumUsers.subscribe(function () {

	    });

	    self.blackberryOption.subscribe(function (opt) {
	        alert(opt + ': changed selection.')
	    });
	}

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