JSFiddle - React, Tailwind, and code Playground

HTML

<div id="appointments" class="tab-pane ">
        <h1>Appointments</h1>
        <form id="addDoctorSchedules" data-validate="parsley">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
                <thead>
                    <tr>
                        <th valign="middle" align="left" style="border-bottom: #edf6f9 solid 1px; border-top: #edf6f9 solid 1px; width: 222px;">Week Day</th>
                        <th align="center" id="to1">From Time</th>
                        <th align="center" id="Td1">To Time</th>
                        <th align="center" id="Td2">Available Hospital</th>
                        <th></th>
                    </tr>
                </thead>
                 <tbody data-bind='foreach: schedules'>
                    <tr>
                        <td width="125" valign="middle" align="left" style="border-bottom: #edf6f9 solid 1px; border-top: #edf6f9 solid 1px;">
                            <select name="day">
                                <option>Select Day</option>
                                <option>Monday</option>
                                <option>Tuesday</option>
                                <option>Wednesday</option>
                                <option>Thursday</option>
                                <option>Friday</option>
                                <option>Saturday</option>
                                <option>Sunday</option>
                            </select>
                        </td>
                        <td align="center" id="Td3">
                            <input type="text" data-format="hh:mm" style="width: 82px">
                        </td>
                        <td align="center" id="Td4">
                            <input type="text" data-format="hh:mm" style="width: 82px">
                        </td>
                        <td align="center" id="Td8">
                            <select name="hospital" class="form-control"...

JavaScript

var iter = 0;
        var DocSchedule = function (id, day, fromtime, totime, hospital, hospitalId) {
            this.id = ko.observable(id);
            this.day = ko.observable(day);
            this.fromtime = ko.observable(fromtime);
            this.totime = ko.observable(totime);
            this.hospital = ko.observable(hospital);
            this.hospitalId = ko.observable(hospitalId);
        };

        var Patientp = function () {
            this.id = ko.observable(idValue);
            this.name = ko.observable(nameValue);
            this.degree = ko.observable(degreeValue);
            this.gender = ko.observable(genderValue);
            this.username = ko.observable(usernameValue);
            this.password = ko.observable(passwordValue);
            this.email = ko.observable(emailValue);
            this.mobile = ko.observable(mobileValue);
            this.imgFile = ko.observable(imgFileValue);
            this.imgSrc = ko.observable(imgSrcValue);
            this.imagePath = ko.observable(imagePathValue);
            this.userid = ko.observable(useridValue);
            this.department = ko.observable(departmentValue);
            this.schedulers = ko.observableArray([]);

            this.addSlot = function (doctor) {
                mm = doctor
                console.log("this", doctor);
                var docSchedule = new DocSchedule();
                iter++;
                docSchedule.id(iter);
                this.schedulers().push(docSchedule);
            }
        }
        idValue = 'hi';
        useridValue = 'hi';
        nameValue = 'hi';
        addressValue = 'adress';
        genderValue = 'hi';
        mobileValue = 'hi';
        usernameValue = 'hi';
        passwordValue = 'hi';
        emailValue = 'hi';
        imgFileValue = 'imagefileValue';
        imgSrcValue = 'ui_resources/img/profile_pic.png';
        imagePathValue = 'imagePathValue';
        consultantArrValue = null;
        consultantValue = "d1";
       ...