JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://bestware.us/knockout/476-lightweight-with-if/knockout-latest.js"></script>
<div class="compatibleContainers" data-bind="if: list().length > 0">
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Location</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: {data: list, afterAdd: handleAfterAdd}"><tr>
            <td data-bind="text: name"></td>
            <td data-bind="text: location"></td>
        </tr></tbody>
    </table>
</div>
<button data-bind="click: addRandom">Add Item</button>
<div id="didIGetCalled"></div>

JavaScript

var viewModel = {
    r: 0,
    addRandom: function(){
        this.r = Math.floor(Math.random()*100);
        this.list.push({name: "hi" + this.r, location: "here" + this.r});
    },
    handleAfterAdd: function(){
        jQuery("#didIGetCalled").text("Yes" + viewModel.r);
    },
    list: ko.observableArray([{name: "hi", location: "here"}])
};

ko.applyBindings(viewModel);