JSFiddle - React, Tailwind, and code Playground

by Regisc

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta name="robots" content="noindex">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
        <script type="text/javascript" src="http://www.binboy.gigfa.com/files/js/jquery-1.6.min.js"></script>
        <script type="text/javascript" src="http://www.binboy.gigfa.com/files/js/jquery.MultiFile.min.js"></script>
        <script type="text/javascript" src="http://www.binboy.gigfa.com/files/js/admin.js"></script>
<link rel="stylesheet" href="http://www.binboy.gigfa.com/files/css/admin_style.css" >
        <title>TEST</title>
        <script type="text/javascript">
            var interval = self.setInterval("clock()", 1000);
            function clock() {
                var date = new Date();
                var hourOffset = 3;
                date.setUTCHours(date.getUTCHours(), date.getUTCMinutes());
                var time = date.getTime();
                date.setUTCFullYear(date.getUTCFullYear(), 2, 22);
                var dstStart = date.getTime();
                date.setUTCFullYear(date.getUTCFullYear(), 8, 22);
                var dstEnd = date.getTime();
                if(time > dstStart && time < dstEnd)
                    hourOffset = 4;
                date.setUTCHours(date.getUTCHours() + hourOffset, date.getUTCMinutes() + 30);
                var output = date.getUTCHours() + ":" + date.getUTCMinutes() + ":" + date.getUTCSeconds();
                document.getElementById("clock").innerHTML = output;
            }
        </script>
    </head>
    <body>
        <center><div id="main_admin" style="width: 1205px;">
    <div class="insert">
<div style="text-align: left; margin: -50px -5px;">
        <div id="loadingDiv" style="display: none;">LOADING...</div>
        <form action="http://www.binboy.gigfa.com/admin/tour_foreign/insert_data" method="post" enctype="multipart/form-data">
          ...

JavaScript

$(document).ready(function () {
    ////////////////////////////////////////////////////////////////
    $('#loadingDiv').hide() // hide it initially
    .ajaxStart(function () {
        $(this).show();
    }).ajaxStop(function () {
        $(this).hide();
    });
    
    ///////auto_complete///////////////////////////////////////////////
    $('.auto_complete').keyup(function () {
        var dataObj = $(this).closest('form').serialize();
        $.ajax({
            type: "POST",
            dataType: 'json',
            url: 'http://binboy.gigfa.com/admin/tour_foreign/auto_complete',
            url: 'auto_complete',
            data: dataObj,
            cache: false,
            success: function (data) {
                var id_name = $('.list_autobox_hotel').attr('id');
                $('.list_autobox_hotel').show().html('');
                if (data == 0) {
                    $('.list_autobox_hotel').show().html('<p><b>there is no</b></p>');
                } else {
                    $.each(data, function (index, value) {
                        $('<p id="' + value.name + '">' + value.name + '</p>').appendTo('.list_autobox_hotel');
                    });
                    $('.list_autobox_hotel p').bind("click", function (e) {
                        e.preventDefault();
                        var ac = $(this).text();
                        var ok = $.grep(data, function (e) {
                            return e.name == ac;
                        })[0].units;
                        var cssObj = {
                            "background-color": "#e2ebf1",
                            border: "1px solid #e2e2e2"
                        };
                        $('.bg_units').css(cssObj);
                        $.each(ok, function (bu, key) {

                            $("<div class='mediumCell'/>").hide().fadeIn('slow').append('<b>' + key.name_units + '</b>', $('<div class="column" style="float: left;" />').append(
                           ...