JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.gettrip.co.id/js/jquery-calx-1.1.9.min.js"></script>
<script src="http://www.gettrip.co.id/js/jquery-ui.js"></script>
<body>
     <h3>Price Check</h3>

    <form id="calx">
        <table>
            <tbody>
                <p>check in :
                    <input type="text" id="TextBox1" />
                </p>
                <p>check out :
                    <input type="text" id="TextBox2" />
                </p>
                <select id="mark" name="mark">
                    <option value="">hotel</option>
                    <option value="bmw">Homestay</option>
                    <option value="audi">Nirwana Laut</option>
                </select>
                <select id="series" name="series">
                    <option value="">room</option>
                    <option value="33750" class="bmw">standart</option>
                    <option value="27500" class="bmw">premium</option>
                    <option value="300" class="bmw">Full AC</option>
                    <option value="400" class="audi">Family</option>
                    <option value="500" class="audi">executive</option>
                    <option value="600" class="audi">Busines</option>
                </select>
                <!-- <tr>
		    <td>Penginapan</td>
		    <td>
			<select name="proc" id="proc" onchange="$TextBox">
			    <option value="0">Pilih Jenis Penginapan</option>
			    <option value="300">Kamar mandi dalam</option>
			    <option value="200">Kamar mandi Luar</option>
			</select>
		    </td>
		</tr> -->
                <tr>
                    <td>Tour</td>
                    <td>
                        <select name="wisata" id="wisata">
                            <option value="0">choose tour</option>
                            <option value="100000">Full Day</option>
                            <option value="50000">Half Day</option>
                        </select>
                    </td>
                </tr>
         ...

CSS

/*! jQuery UI - v1.9.2 - 2012-11-23
* http://jqueryui.com
* Includes: jquery.ui.core.css, jquery.ui.accordion.css, jquery.ui.autocomplete.css, jquery.ui.button.css, jquery.ui.datepicker.css, jquery.ui.dialog.css, jquery.ui.menu.css, jquery.ui.progressbar.css, jquery.ui.resizable.css, jquery.ui.selectable.css, jquery.ui.slider.css, jquery.ui.spinner.css, jquery.ui.tabs.css, jquery.ui.tooltip.css, jquery.ui.theme.css
* Copyright 2012 jQuery Foundation and other contributors; Licensed MIT */

/* Layout helpers
----------------------------------*/
 .ui-helper-hidden {
    display: none;
}
.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.ui-helper-reset {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    line-height: 1.3;
    text-decoration: none;
    font-size: 100%;
    list-style: none;
}
.ui-helper-clearfix:before, .ui-helper-clearfix:after {
    content:"";
    display: table;
}
.ui-helper-clearfix:after {
    clear: both;
}
.ui-helper-clearfix {
    zoom: 1;
}
.ui-helper-zfix {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    opacity: 0;
    filter:Alpha(Opacity=0);
}
/* Interaction Cues
----------------------------------*/
 .ui-state-disabled {
    cursor: default !important;
}
/* Icons
----------------------------------*/

/* states and images */
 .ui-icon {
    display: block;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
}
/* Misc visuals
----------------------------------*/

/* Overlays */
 .ui-widget-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.ui-accordion .ui-accordion-header {
    display: block;
    cursor: pointer;
    position: relative;
    margin-top: 2px;
    padding: .5em .5em .5em .7em;
    zoom: 1;
}
.ui-accordion .ui-accordion-icons {
    padding-left:...

JavaScript

$(document).ready(function () {
    $('#calx').calx({
        autocalculate: false
    });

    $('#calculate').click(function () {
        $('#calx').calx('update');
    });

    $("#TextBox1").datepicker({
        minDate: 0,
        maxDate: '+1Y+6M',
        onSelect: function (dateStr) {
            var min = $(this).datepicker('getDate'); // Get selected date
            $("#TextBox2").datepicker('option', 'minDate', min || '0'); // Set other min, default to today
        }
    });

    $("#TextBox2").datepicker({
        minDate: '0',
        maxDate: '+1Y+6M',
        onSelect: function (dateStr) {
            var max = $(this).datepicker('getDate'); // Get selected date
            $('#datepicker').datepicker('option', 'maxDate', max || '+1Y+6M'); // Set other max, default to +18 months
            var start = $("#TextBox1").datepicker("getDate");
            var end = $("#TextBox2").datepicker("getDate");
            var days = (end - start) / (1000 * 60 * 60 * 24);
            $("#TextBox").val(days);
            //location.reload();

        }
    });
});

;
(function ($, window, document, undefined) {
    "use strict";

    $.fn.chained = function (parent_selector, options) {

        return this.each(function () {

            /* Save this to child because this changes when scope changes. */
            var child = this;
            var backup = $(child).clone();

            /* Handles maximum two parents now. */
            $(parent_selector).each(function () {
                $(this).bind("change", function () {
                    updateChildren();
                });

                /* Force IE to see something selected on first page load, */
                /* unless something is already selected */
                if (!$("option:selected", this).length) {
                    $("option", this).first().attr("selected", "selected");
                }

                /* Force updating the children. */
                updateChildren();
         ...