JSFiddle - React, Tailwind, and code Playground

by Suresh Shenoy

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<script src="https://rawgithub.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>

      
<select id="TaskType" data-bind='options: TaskTypes, optionsText: "NAME", optionsValue: "ID", value: SelectedTaskTypeID ,event:{change:selectTaskType}'></select>Selected Id: <span data-bind="text: SelectedTaskTypeID"></span>
<br>
 
<select id="Tasks" data-bind='options: Tasks, optionsText: "NAME", optionsValue: "ID", value: SelectedTaskID,event:{change:selectTask}'></select>
Selected Id: <span data-bind="text: SelectedTaskID"></span>
<br>
 <select id="Clinician" data-bind='options: Clinicians, optionsText: "NAME", optionsValue: "ID", value: SelectedClinicianID,event:{change:selectClinician}'></select>

        Selected Id: <span data-bind="text: SelectedClinicianID"></span>

JavaScript

var TaskMasterData = [{
    "ROWID": 1,
    "ID": 29,
    "NAME": "SN",
    "Tasks": [{
        "ROWID": 1,
        "ID": 418,
        "NAME": "Start of Care OASIS-C"
    }, {
        "ROWID": 2,
        "ID": 419,
        "NAME": "Resumption of Care"
    }, {
        "ROWID": 3,
        "ID": 420,
        "NAME": "Recertification"
    }, {
        "ROWID": 4,
        "ID": 421,
        "NAME": "Other follow-up visit"
    }, {
        "ROWID": 5,
        "ID": 422,
        "NAME": "Transferred to an inpatient facility - No discharge"
    }, {
        "ROWID": 6,
        "ID": 423,
        "NAME": "Transferred to an inpatient facility - with discharge"
    }, {
        "ROWID": 7,
        "ID": 424,
        "NAME": "Death at home"
    }, {
        "ROWID": 8,
        "ID": 425,
        "NAME": "Discharge from Agency"
    }, {
        "ROWID": 9,
        "ID": 426,
        "NAME": "SN visit - Routine"
    }, {
        "ROWID": 10,
        "ID": 427,
        "NAME": "SN visit - PRN or On-call"
    }, {
        "ROWID": 11,
        "ID": 428,
        "NAME": "LVN Supervisory Visit"
    }, {
        "ROWID": 12,
        "ID": 429,
        "NAME": "HHA Supervisory Visit"
    }, {
        "ROWID": 13,
        "ID": 849,
        "NAME": "SN Visit - Management and Evaluation of  POC"
    }, {
        "ROWID": 14,
        "ID": 850,
        "NAME": "SN Visit - Observation and Assessment"
    }, {
        "ROWID": 15,
        "ID": 851,
        "NAME": "SN Visit - Training and/or Education"
    }, {
        "ROWID": 1,
        "ID": 430,
        "NAME": "Start of Care OASIS-C"
    }, {
        "ROWID": 2,
        "ID": 431,
        "NAME": "Resumption of Care"
    }, {
        "ROWID": 3,
        "ID": 432,
        "NAME": "Recertification"
    }, {
        "ROWID": 4,
        "ID": 433,
        "NAME": "Other follow-up visit"
    }, {
        "ROWID": 5,
        "ID": 434,
        "NAME": "Transferred to an inpatient facility - No discharge"
    }, {
        "ROWID": 6,
  ...