JSFiddle - React, Tailwind, and code Playground

by Jon Kittell

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.6.8/jquery.timepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.6.8/jquery.timepicker.min.css">
<div class="modal fade" tabindex="-1" role="dialog" data-bind="modal:showDialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                 <h4 class="modal-title">Bankers Fidelity Life Insurance Company - Lead Order Form</h4>

            </div>
            <div class="modal-body">
                <p>Agent Name:
                    <input data-bind="textInput: agentName" />
                </p>
                <p>Agent Writing Number:
                    <input data-bind="textInput: agentWritingNumber" />
                </p>
                <p>Contact Phone:
                    <input data-bind="textInput: contactPhone" />
                </p>
                <p>Contact Email:
                    <input data-bind="textInput: contactEmail" />
                </p>
                <p>Delivery Method: 
                    <br />
                    <label>
                        <input type="radio" value="Text" data-bind="checked: radioSelectedDeliveryMethod" />Text (See Attached Instructions)
                    </label>
                    <a data-bind="attr: {href: url, title: details }" target="_new">Text Message Instructions</a>
                    <br />
                    <label>
                        <input type="radio" value="Email" data-bind="checked: radioSelectedDeliveryMethod" />Email</label>
       ...

JavaScript

ko.bindingHandlers.confirmClick = {
    init: function (element, valueAccessor, viewModel) {
        var value = valueAccessor();
        var message = ko.unwrap(value.message);
        var click = value.click;
        ko.applyBindingsToNode(element, {
            click: function () {
                if (confirm(message)) return click.apply(this, Array.prototype.slice.apply(arguments));
            }
        }, viewModel);
    }
};

ko.bindingHandlers.modal = {
    init: function (element, valueAccessor) {
        $(element).modal({
            show: false
        });

        var value = valueAccessor();
        if (typeof value === 'function') {
            $(element).on('hide.bs.modal', function () {
                value(false);
            });
        }
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).modal("destroy");
        });

    },
    update: function (element, valueAccessor) {
        var value = valueAccessor();
        if (ko.utils.unwrapObservable(value)) {
            $(element).modal('show');
        } else {
            $(element).modal('hide');
        }
    }
};

function PopupViewModel() {

    var self = this;
    self.showDialog = ko.observable(false);
    self.url = "https://google.com";
    self.details = "HP1 Text Notification Instructions";

    self.agentName = ko.observable();
    self.agentWritingNumber = ko.observable();
    self.contactPhone = ko.observable();
    self.contactEmail = ko.observable();
    self.radioSelectedDeliveryMethod = ko.observable();
    self.radioSelectedTimeZoneDelivery = ko.observable();
    self.totalNumberOfMonthlyLeads = ko.observable();

    self.mondayStartTime = ko.observable();
    self.mondayEndTime = ko.observable();
    self.mondayMaxNumberOfLeads = ko.observable();

    self.tuesdayStartTime = ko.observable();
    self.tuesdayEndTime = ko.observable();
    self.tuesdayMaxNumberOfLeads = ko.observable();

    self.wednesdayStartTime =...