JSFiddle - React, Tailwind, and code Playground

by gurkavcu

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: function() { $root.deleteActionItem($parent,ko.utils.arrayIndexOf($parent.ActionItems,$data)); }">remove item</a> </li>
                        </ol>
                    </div>
                </div>

JavaScript

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": null,
            "ActionConditionMatchType": null,
            "ActionConditionExpressions": null}]},
    {
        "ActionParamaters": [{
            "ParameterName": "dicomattribute",
            "ParameterValue": "Acquisition Matrix",
            "ActionConditionCustomQuery": null,
            "ActionConditionMatchType": null,
            "ActionConditionExpressions": null}]}]},
{
    "ActionDisplay": "Route study to registered nodes",
    "ActionName": "routeimage",
    "ActionItems": [{
        "ActionParamaters": [{
 ...