JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.debug.js"></script>
<button id="button" data-bind="click: addremove">Click</button>
<table id="grid">
    <tbody data-bind='template: { foreach: data, afterAdd: addLine, beforeRemove: removeLine }'>
        <tr>
            <td data-bind="text: test"></td>
            <td>
                
            </td>
        </tr>
    </tbody>
</table>

JavaScript

jQuery(function ($) {
    // this runs after the window loads
    var ViewModel = function (data) {
        var self = this;
        self.data = ko.observableArray(data);
        self.removeLine = function (elem) {
            if (elem.nodeType === 1) $(elem).fadeOut(3000, function () {
                $(elem).remove();
            });
        }
        
        self.addLine = function (elem) {
            if (elem.nodeType === 1) 
                $(elem).hide().fadeIn(3000);
        }
        
        self.removeItem = function() {
            self.data.remove(function(item) { return item.test && item.test == 2; });   
        }
        
        self.addItem = function() {
            self.data.splice(1, 0, { test: 9 }); 
        }
        
        self.addremove = function () {
            self.removeItem();
            var id = setInterval(function() {
                self.addItem();
                clearInterval(id);
            },1000);
        }
    }


    var vm = new ViewModel([{
        test: 9
    }, {
        test: 2
    }, {
        test: 1
    }, {
        test: 1
    }, {
        test: 1
    }, {
        test: 1
    }, {
        test: 1
    }]);

    ko.applyBindings(vm);

});