JSFiddle - React, Tailwind, and code Playground

by amitava82

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<button data-bind="click: edit">Click to Edit</button>
<button data-bind="click: log">save data</button>
<div data-bind="foreach: $root.data">
                    <div style="margin: 5px; border: 1px solid #BCE8F1">
                        <h5 class="header" style="cursor: move">
                            Actions: <span data-bind="text: ActionDisplay"></span> <a data-bind="click: $root.deleteAction"
                                 href="javascript:void(0)">remove action</a>
                        </h5>
                        <ol data-bind="foreach: ActionItems">
                            <li>
                                <!-- ko foreach: ActionParamaters -->
                                <strong style="color: darkblue"><span data-bind="text: ParameterName"></span>:</strong>
                                <span data-bind="text: ParameterValue"></span>
                                <!-- /ko -->
                                <a href="javascript:void(0)" data-bind="click: $root.deleteActionItem">remove item</a> </li>
                        </ol>
                    </div>
                </div>

JavaScript

var viewModel = function() {
    var self = this;
    self.data = ko.observableArray([]);
    self.edit = function() {
        self.data(editData)
    }
    self.log = function() {
            console.log(self.data())
    }
    self.deleteAction = function(data) {
        //delete root node
           self.data.remove(data)
    }
    self.deleteActionItem = function(data) {
        //delete items
            console.log(self.data())
    }
}
$(function() {
    ko.applyBindings(new viewModel());

});
//sample data from ajax
var editData = [{
    "ActionDisplay": "Add/Modify registered DICOM attributes",
    "ActionName": "addchangeattribute",
    "ActionItems": [{
        "ActionParamaters": [{
            "ParameterName": "dicomattribute",
            "ParameterValue": "Accession Number",
            "ActionConditionCustomQuery": null,
            "ActionConditionMatchType": null,
            "ActionConditionExpressions": null},
        {
            "ParameterName": "value",
            "ParameterValue": "zx",
            "ActionConditionCustomQuery": null,
            "ActionConditionMatchType": null,
            "ActionConditionExpressions": null}]},
    {
        "ActionParamaters": [{
            "ParameterName": "dicomattribute",
            "ParameterValue": "Acquisition Device Processing Code",
            "ActionConditionCustomQuery": null,
            "ActionConditionMatchType": null,
            "ActionConditionExpressions": null},
        {
            "ParameterName": "value",
            "ParameterValue": "sfsd",
            "ActionConditionCustomQuery": null,
            "ActionConditionMatchType": null,
            "ActionConditionExpressions": null}]}]},
{
    "ActionDisplay": "Delete DICOM attributes",
    "ActionName": "deletedicomattribute",
    "ActionItems": [{
        "ActionParamaters": [{
            "ParameterName": "dicomattribute",
            "ParameterValue": "Acquisition Context Sequence",
            "ActionConditionCustomQuery":...