JSFiddle - React, Tailwind, and code Playground

by gutek

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<ul data-bind="template: { name: 'conditionTemplate', foreach: conditions}">
</ul>
<button class="btn" data-bind="click: addNew">Add new Condition</button> 

<button class="btn" id="saveId">save</button> 

<script type="text/x-jquery-tmpl" id="conditionTemplate"> 
    <li> 
        <strong>Con.#: </strong> <span data-bind="text: structuredOrder" style="font-weight: bold" /><br/>  
        <strong>ID: </strong> <span data-bind="text: conditionId"/><br/>         
        
        <button class="btn" data-bind="click: table.moveUp, disable: table.moveUpEnable">Move Up</button> 
        <button class="btn" data-bind="click: table.moveDown, disable: table.moveDownEnable">Move Down</button> 
        <button class="btn" data-bind="click: table.remove">Remove</button> 
        <br /> 
        
        <ul data-bind="template: { name: 'conditionTemplate', foreach: conditions}"> 
        </ul> 
        
    </li>
    <li data-bind="if: isLast, visible: isLast">
        <button class="btn" data-bind="click: table.addNew">Add new Condition</button> 
    </li>        
</script>

JavaScript

function GeneralCondition(data) {
        var general = this;

        function Condition(data, parent) {
            var self = this;
            
            if(!parent) {
                parent = general;
            }
            
            if(data) {
                this.conditionId= ko.observable(data.conditionId);
                this.description = ko.observable(data.description);
                this.conditionText= ko.observable(data.conditionText);
                this.closingText= ko.observable(data.closingText);
                this.crmId = ko.observable(data.crmId);
                this.version = ko.observable(data.version);
                this.theme = ko.observable(data.theme);
                this.help = ko.observable(data.help);
                this.type = ko.observable(data.type);

                if(data.conditions) {
                    this.conditions = ko.mapping.fromJS(data.conditions, {
                        create: function(options) {
                            return new Condition(options.data, self);
                        }
                    });
                } else {
                    this.conditions = ko.observableArray([]);
                }
            } else {
                this.conditions = ko.observableArray([]);
                this.conditionId = ko.observable();
                this.description = ko.observable();
                this.conditionText= ko.observable();
                this.closingText= ko.observable();
                this.crmId = ko.observable();
                this.version = ko.observable();
                this.theme = ko.observable();
                this.help = ko.observable();
                this.type = ko.observable('bespoke');
            }
            
            this.isLast = ko.computed(function() {
                var cons = parent.conditions(),
                        index = ko.utils.arrayIndexOf(cons, this),
                        length = cons.length;
                    
         ...