JSFiddle - React, Tailwind, and code Playground

by sando ahmad

HTML

<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>
		<tr>
		
		<!--<td>
			 <input type="checkbox" id="makan" value="65000" />
			 </td>
		</tr> -->
		<!-- <tr>
		    <td>HDD Space :</td>
		    <td>
			<select name="hdd" id="hdd">
			    <option value="0">250 GB</option>
			    <option value="7">500 GB</option>
			    <option value="12">750 GB</option>
			    <option value="15">1 TB</option>
			    <option value="25">2 TB</option>
			</select>
		    </td>
		</tr> -->
		
		<tr>
		    
		    <p>Difference :
		    <input type=""  id="TextBox" value="$TextBox" />
		</p>
		    <!--<td><span id="price" data-format="$ 0,0[.]00" data-formula="$wisata+$makan"></span></td>-->
		    <td><span style="visibility:hidden"...

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: 2.2em; }
.ui-accordion .ui-accordion-noicons { padding-left: .7em; }
.ui-accordion .ui-accordion-icons .ui-accordion-icons { padding-left: 2.2em; }
.ui-accordion .ui-accordion-header...

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();
            });

            function updateChildren()...