JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://www.appelsiini.net/download/jquery.jeditable.mini.js"></script>
<div class="edit" id="div_1"></div>
<div class="edit1" id="div_2"></div>

CSS

table.jCalendar {
	border: 1px solid #000;
	background: #aaa;
    border-collapse: separate;
    border-spacing: 2px;
}
table.jCalendar th {
	background: #333;
	color: #fff;
	font-weight: bold;
	padding: 3px 5px;
}

table.jCalendar td {
	background: #ccc;
	color: #000;
	padding: 3px 5px;
	text-align: center;
}
table.jCalendar td.other-month {
	background: #ddd;
	color: #aaa;
}
table.jCalendar td.today {
	background: #666;
	color: #fff;
}
table.jCalendar td.selected {
	background: #f66;
	color: #fff;
}
table.jCalendar td.selected.dp-hover {
	background: #f33;
	color: #fff;
}
table.jCalendar td.dp-hover,
table.jCalendar tr.activeWeekHover td {
	background: #fff;
	color: #000;
}
table.jCalendar tr.selectedWeek td {
	background: #f66;
	color: #fff;
}
table.jCalendar td.disabled, table.jCalendar td.disabled.dp-hover {
	background: #bbb;
	color: #888;
}
table.jCalendar td.unselectable,
table.jCalendar td.unselectable:hover,
table.jCalendar td.unselectable.dp-hover {
	background: #bbb;
	color: #888;
}

/* For the popup */

/* NOTE - you will probably want to style a.dp-choose-date - see how I did it in demo.css */

div.dp-popup {
	position: relative;
	background: #ccc;
	font-size: 10px;
	font-family: arial, sans-serif;
	padding: 2px;
	width: 171px;
	line-height: 1.2em;
}
div#dp-popup {
	position: absolute;
	z-index: 199;
}
div.dp-popup h2 {
	font-size: 12px;
	text-align: center;
	margin: 2px 0;
	padding: 0;
}
a#dp-close {
	font-size: 11px;
	padding: 4px 0;
	text-align: center;
	display: block;
}
a#dp-close:hover {
	text-decoration: underline;
}
div.dp-popup a {
	color: #000;
	text-decoration: none;
	padding: 3px 2px 0;
}
div.dp-popup div.dp-nav-prev {
	position: absolute;
	top: 2px;
	left: 4px;
	width: 100px;
}
div.dp-popup div.dp-nav-prev a {
	float: left;
}
/* Opera needs the rules to be this specific otherwise it doesn't change the cursor back to pointer after you have disabled and re-enabled a link */
div.dp-popup div.dp-nav-prev a, div.dp-popup div.dp-nav-next a...

JavaScript

/**
* Example custom inputs. 
*
*/

/* $Id $ */

/* Needs http://digitalbush.com/projects/masked-input-plugin */
$.editable.addInputType('masked', {
    /* Create input element. */
    element : function(settings, original) {
        /* Create an input. Mask it using masked input plugin. Settings */
        /* for mask were passed with jEditable settings hash. Remember  */
        /* to return the created input!                                 */
        var input = $('<input>').mask(settings.mask);
        $(this).append(input);
        return(input);
    }
});

/* Needs http://jquery.com/plugins/project/timepicker */
$.editable.addInputType('timepicker', {
    /* This uses default hidden input field. No need for element() function. */    

    /* Call before submit hook. */
    submit: function (settings, original) {
        /* Collect hour, minute and am/pm from pulldowns. Create a string from */
        /* them. Set value of hidden input field to this string.               */
        var value = $("#h_").val() + ":" + $("#m_").val() + "" + $("#p_").val();
        $("input", this).val(value);
    },
    /* Attach Timepicker plugin to the default hidden input element. */
    plugin:  function(settings, original) {        
        $("input", this).filter(":hidden").timepicker();
    }
});

$.editable.addInputType('time', {
    /* Create input element. */
    element : function(settings, original) {
        /* Create and pulldowns for hours and minutes. Append them to */
        /* form which is accessible as variable this.                 */ 		
		var hourselect = $('<select id="hour_">');
		var minselect  = $('<select id="min_">');
		
		for (var hour=1; hour <= 24; hour++) {
		    if (hour < 10) {
		        hour = '0' + hour;
		    }
		    var option = $('<option>').val(hour).append(hour);
		    hourselect.append(option);
		}
		$(this).append(hourselect);

		for (var min=0; min <= 45; min = parseInt(min)+15) {
		    if (min < 10) {
		        min = '0' + min;
		 ...