JSFiddle - React, Tailwind, and code Playground

by Suresh Shenoy

HTML

<script src="https://rawgithub.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
 <table>
    <thead>
        <tr>
            <th>Type of Visit</th>
            <th>Scheudled Task</th>
            <th>Clinician</th>
            <th>Date</th>
            <th>Delete</th>
        </tr>
    </thead>
    <tbody data-bind="foreach:Schedules">
        <tr>
            <td>
                <select  data-bind='options: $parent.TaskTypes, optionsText: "NAME", optionsValue: "ID", value: TaskTypeID'></select>Selected Id: <span data-bind="text: TaskTypeID"></span>

            </td >
            <td data-bind='with:TaskTypeID'>
                <select id="Tasks" data-bind='options: TaskTypes.Tasks, optionsText: "NAME", optionsValue: "ID", value: TaskID'></select>Selected Id: <span data-bind="text: TaskID"></span>

            </td>
            <td>
                <select id="Clinician" data-bind='options: ClinicianData, optionsText: "NAME", optionsValue: "ID", value: ClinicianID'></select>Selected Id: <span data-bind="text: ClinicianID"></span>

            </td>
            <td>
                 <input data-bind="datepicker: ScheduledDate, datepickerOptions: { minDate: new Date() }" />
            </td>
            <td>
                <img src="https://agencyemr.com/Styles/HHM/Grey/../../../Images/Themes/HHM/Grey/closebtn.png"  data-bind='click: $root.removeScheudle'/>
            </td>
        </tr>
    </tbody>
</table>

JavaScript

// Date Picker Code goes here 
        ko.bindingHandlers.datepicker = {
            init: function (element, valueAccessor, allBindingsAccessor) {
                var $el = $(element);

                //initialize datepicker with some optional options
                var options = allBindingsAccessor().datepickerOptions || {};
                $el.datepicker(options);

                //handle the field changing
                ko.utils.registerEventHandler(element, "change", function () {
                    var observable = valueAccessor();
                    observable($el.datepicker("getDate"));
                });

                //handle disposal (if KO removes by the template binding)
                ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                    $el.datepicker("destroy");
                });

            },
            update: function (element, valueAccessor) {
                var value = ko.utils.unwrapObservable(valueAccessor()),
            $el = $(element),
            current = $el.datepicker("getDate");

                if (value - current !== 0) {
                    $el.datepicker("setDate", value);
                }
            }
        };
        // Date picker code ends here

        // Model script goes here

        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...