JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
<a class="btn btn-primary"  onclick="javascript:alert(JSON.stringify(ko.contextFor(document.body).$root));" href="#" title="show">Show Knockout $root</a>

Hello
<div data-bind="style: { display: (pagedList().length < extQty()) ? 'block' : 'none' }"
<p class="pull-right"><a class="btn btn-primary" data-bind="click: $root.add" href="#" title="edit"><i class="icon-plus"></i> Add Extension</a>
</p>
</div>
<!-- ko if: pagedList().length < extQty() -->
<!-- /ko -->

JavaScript

var ListViewModel = function (initialData) {
var countOfElemetsDisplayed=3;
    var self = this;
    self.extQty = ko.observable(countOfElemetsDisplayed);
    window.viewModel = self;

    self.list = ko.observableArray(initialData);
    self.pageSize = ko.observable(10);
    self.pageIndex = ko.observable(0);
    self.selectedItem = ko.observable();
    self.saveUrl = '/api/extension/save';
    self.deleteUrl = '/api/extension/delete';



    self.edit = function (item) {
        self.selectedItem(item);
    };

    self.cancel = function () {
        self.selectedItem(null);
    };

    self.add = function () {
       
        var newItem = new Extension();
        self.list.push(newItem);
        self.selectedItem(newItem);
        self.moveToPage(self.maxPageIndex());
    };
    self.remove = function (item) {

        if (confirm('Are you sure you wish to delete this item?')) {
            $.post(self.deleteUrl, item).complete(function (result) {
                self.list.remove(item);
                if (self.pageIndex() > self.maxPageIndex()) {
                    self.moveToPage(self.maxPageIndex());
                }
            });
        }

        /*else {
						self.list.remove(item);
						if (self.pageIndex() > self.maxPageIndex()) {
							self.moveToPage(self.maxPageIndex());
						}*/
        //}
    };
    self.save = function () {
        var item = self.selectedItem();
        $.post(self.saveUrl, item, function (result) {
            self.selectedItem().id(result);
        });
        self.selectedItem(null);
    };

    self.templateToUse = function (item) {
        return self.selectedItem() === item ? 'editTmpl' : 'itemsTmpl';
    };

    self.pagedList = ko.dependentObservable(function () {
        var size = self.pageSize();
        var start = self.pageIndex() * size;
        return self.list.slice(start, start + size);
    });
    self.maxPageIndex = ko.dependentObservable(function () {
        return Math.ceil(self.list().length /...