JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<table class="table">
	<thead>
		<tr>
			<th style="width: 20%">Id</th>
			<th style="width: 55%">Description</th>
			<th style="width: 15%"></th>
		</tr>
	</thead>
	<tbody data-bind="foreach: Offers">
		<tr class="form-horizontal">
			<td style="width: 30%" class="control-group">
				<div data-bind="text: Id, visible: $data.IsNotActive"></div>
				<input type="text" class="input-xlarge" data-bind="value: Id, visible: $data.IsActive" />
			</td>
			<td style="width: 55%" class="control-group">
				<div data-bind="text: Name, visible: $data.IsNotActive"></div>
				<input type="text" class="input-xxlarge" data-bind="value: Name, visible: $data.IsActive" />
			</td>
			<td style="width: 15%" class="actions">
				<button title="Edit" class="btn btn-mini" data-bind="click: $data.activateOffer, visible: $data.IsNotActive">
					<i class="icon-edit"></i>
				</button>
				<button title="Save" class="btn btn-success btn-mini" data-bind="click: $data.deactivateOffer, visible: $data.IsActive">
					<i class="icon-ok icon-white"></i>
				</button>
				<button title="Delete" class="btn btn-danger btn-mini" data-bind="click: $root.removeOffer, clickBubble: false">
					<i class="icon-trash icon-white"></i>
				</button>
			</td>
		</tr>
	</tbody>
</table>
<button class="btn pull-right" data-bind="click: $root.addOffer"><i class="icon-plus" style="padding-right: 5px;"></i>Add offer</button>

JavaScript

var Offer = (function () {
	var activeOffer = function() {};
    
	//CONSTRUCTOR
	var offer = function(name, productMasterId, active) {

		var self = this;
		activeOffer = active;
		self.Name = ko.observable(name);
		self.Id = ko.observable(productMasterId);


		active(this);
		self.IsActive = ko.computed(function () {
			return self == active();
		});
		
		self.IsNotActive = ko.computed(function () {
			return self != active();
		});
	};

	var activateOffer = function () {
		activeOffer(this);
	};

	var deactivateOffer = function () {
        activeOffer(null);
	};

	offer.prototype = {
		constructor: offer,
		activateOffer: activateOffer,
		deactivateOffer: deactivateOffer
	};

	return offer;
}())

var viewModel = new function () {

	var activeUnlockedOffer = ko.observable(""); //we do not even need to add this to the viewModel

	this.Offers = ko.observableArray();


	this.addOffer = function () {
		var offer = new Offer("", "", activeUnlockedOffer);
		viewModel.Offers.push(offer);
	};

	this.removeOffer = function (data) {
		viewModel.Offers.remove(data);
	};


}

ko.applyBindings(viewModel);