JSFiddle - React, Tailwind, and code Playground

by beej

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/pepper-grinder/jquery-ui.css">
    
<div id="modifyDlg">
<form id="order_form">
    <ul>    
<li>
    <ul>
        <li><label for="ModifyPicker">Modify:</label></li>
        <li><select id="ModifyPicker" name="ModifyPicker"><option value="1">Flow</option><option value="2">End Time</option></select></li>
    </ul>
</li>
<li id="ModFlow_li">
    <ul>
        <li><label for="ModFlow">Modify Flow:</label></li>
        <li><input type="text" id="ModFlow" name="ModFlow" size="15"></li>
    </ul>
</li>
<li id="ModOpenEnded_li">
    <ul>
        <li><label for="ModOpenEnded">Open-Ended Run?</label></li>
        <li><input type="checkbox" id="ModOpenEnded" name="ModOpenEnded"></li>
    </ul>
    </li>
<li id="ModEndDate_li">
    <ul>
        <li><label for="ModEndDate">Set End Date:</label></li>
        <li><input type="text" id="ModEndDate" name="ModEndDate" size="15"></li>
    </ul>
    </li>
    </ul>
        </form>
</div>

CSS

.stormtitle { font-size: 18px; }
table { width: 100%; }
.fieldset { border: 1px solid #ddd; margin-top: 1em; }
.fieldset h1 { font-size: 12px; margin-left: 25px; color: black; background: none; }
.fieldset h1 span { display: inline; border: 1px solid #ddd; background: #fff; padding: 5px 10px; position: relative; top: -1.3em; }/* deliveries */

.article-tools { background: none repeat scroll 0 0 #E6EEEE; border: 1px solid #DDDDDD; border-radius: 4px 4px 4px 4px; clear: both; display: block; float: left; margin-bottom: 15px; width: 100%; width: -moz-available; padding: 3px;} 
.article-meta { float: left; padding: 5px; width: 80%; }
div.buttonheading { float: right; width: 15%; }
.buttonheading img { border: 0 none; float: right; margin: 7px 5px 0 0; }

#usage_links { float: left; position: relative;}
#map_canvas { margin: 30px auto; width: 640px; height: 480px;}
#current-water { height: 300px; padding: 0px 0px 35px; text-align: center; }
#riparian, #summary_field, #overview, #current-water { padding: 0 15px 15px 15px; margin: 30px 25px 25px 25px; }
#current-water h1 { text-align: initial; }
.account-summary { border: 1px solid #CCCCCC; margin: 10px 30px 15px 30px; padding: 15px; }
.account-summary legend { color: #555555; font-size: 1.1em; font-weight: bold; }
.account-summary p { line-height: 1; margin: 0 0 8px; }
.sp-highlight { color: #BF242E; font-size: 1.3em; font-weight: bold; }
.sp-bold { font-size: 1.1em; font-weight: bold; }
#staff { font-weight: bold; }
div.right { text-align: right; }
div.address_block { padding: 25px 0 0; width: 250px; }#remit { float: left; font-weight: bold; }
#address { float: right; font-weight: bold; }
form.entryform { margin: 0 0 30px; }
.storm-body h3 { margin: 20px 0 10px 0; }

#MonthlyContainer, #MonthlyUsageGraph { display: inline-block; height: auto;    vertical-align: top; }
#MonthlyUsageTable, #UsageOnTurnout { color: black; }
#MonthlyUsageTable a { color: #3363dd; }
#UsageOnTurnout { width: auto; margin-top: 15px;...

JavaScript

$('#ModifyPicker').change(function () {
    switch (this.value) {
        case '1':
            $('#ModFlow_li').show();
            $('#ModOpenEnded_li, #ModEndDate_li').hide();
            break;
        case '2':            
            $('#ModOpenEnded_li, #ModEndDate_li').show();
            $('#ModFlow_li').hide();
            break;            
    }            
});

$('#ModEndDate').datepicker();

$('#modifyDlg').dialog({
    title: 'Modify Existing Order',
    buttons: [
        {
        text: 'Make Request',
        click: function() {}},
    {
        text: 'Cancel',
        click: function() {
            $(this).dialog('close');
        }}
    ],
    open: function () {
            $('#ModOpenEnded_li, #ModEndDate_li').hide();                    
    }
});