JSFiddle - React, Tailwind, and code Playground

by cs3vigny

HTML

<form id="reportingForm" class="layout" method="post" action="index.cfm?event=report.customReportResults">
    <div>	<span class="loadReportTitle"><b>Load Saved Report</b></span> 
        <select class="loadReportList" name="loadReportSelectList" id="loadReportSelectList">
            <option value="">-Select-</option>
            <option value="FUNCTION|Business|string,TYPEID|1|int:FUNCTION:FUNCTION">Camille's Report</option>
        </select>
    </div>
    <div class="formRow noLabel">
        <input id="loadReport" class="button primary" type="button" value="Load Report" />
    </div>
    	<h2>Select Data</h2>

    <fieldset class="optionGroup border">
        <legend>Record Type</legend>
        <div class="formDiv">
            <input class="formCheckBox" type="radio" name="recordType" id="recordTypeAll" value="recordTypeAll" checked>
            <label for="recordTypeAll">All</label>
        </div>
        <div class="formDiv">
            <input class="formCheckBox" type="radio" name="recordType" id="recordTypeScheduled" value="recordTypeScheduled">
            <label for="recordTypeScheduled">Scheduled</label>
        </div>
        <div class="formDiv">
            <input class="formCheckBox" type="radio" name="recordType" id="recordTypeUnscheduled" value="recordTypeUnscheduled">
            <label for="recordTypeUnscheduled">Unscheduled</label>
        </div>
    </fieldset>
    <fieldset class="optionGroup border">
        <legend>Data Fields</legend>
        <table width="100%" cellPadding="0" cellspacing="0">
            <tr>
                <td>
                    <div class="selectListDiv">
                        <div class="availableColumnsTitle">Available Data Fields:</div>
                        <select name="columnsAvailable" id="columnsAvailable" multiple size="15">
                            <option value="BEGIN_DATE_RANGE">Begin Date Range</option>
                            <option value="CLASSIFICATION_TYPE">Classification...

CSS

.loadReportTitle {
	    margin-right: 5px;
	    vertical-align: middle;
	}
	.loadReportList {
	    vertical-align: middle;
	}
	form.layout .optionGroup input[type="checkbox"], form.layout .optionGroup input[type="radio"] {
	    margin-left: 10px;
	}
	.formDiv {
	    margin-bottom: 2px;
	}
	.availableColumnsTitle {
	    font-weight: bold;
	}
	.selectedColumnsTitle {
	    font-weight: bold;
	}
	.selectListDiv {
	    float: left;
	    clear: none;
	    width: 210px;
	    height: 275px;
	    padding-left: 10px;
	}
	.selectListNaviagtionDivCenter {
	    float: left;
	    clear: none;
	    width: 75px;
	    height: 175px;
	    margin-top: 100px;
	}
	.selectListNaviagtionDivRight {
	    float: left;
	    clear: none;
	    width: 75px;
	    height: 150px;
	    margin-top: 125px;
	}
	.selectListNaviagtion {
	    height: 30px;
	}
	.listNavigationButton {
	    padding: 2px;
	}
	.listNavigationButton > input {
	    width: 70px;
	}
	.sortReportDiv {
	}
	.sortReportTitle {
	    font-weight: bold;
	    padding-right: 5px;
	    padding-left: 10px;
	}
	#columnsAvailable {
	    width: 200px;
	}
	#selectedColumns {
	    width: 200px;
	}
	.saveReport {
	    margin-bottom: 5px;
	}
	.viewReport {
	    margin-bottom: 5px;
	}
	.listOptionGrey {
	    color: #999;
	}
	.filterCell {
	    text-align: right;
	}
	#clearFilters {
	    margin-left: 10px
	}
	form.layout .optionGroup {
	    width: 900px;
	}
	form.layout .noLabel {
	    padding-left: 0px;
	}
	form.layout .optionGroup label {
	    width: 190px;
	}
	form.layout input[type="text"], form.layout textarea {
	    width: 80px;
	}
	table {
	    border: none;
	}
	tbody td {
	    border: none;
	}
	.binaryDropDownList {
	    width: 84px;
	}

JavaScript

$(document).ready(function () {
	    var onlyBothItems = ["RECORD_TYPE"];
	    var scheduledOnlyItems = ["SCHEDULE_NUMBER", "SCHEDULE_NUMBER_TYPE", "ITEM_NUMBER"];
	    var unscheduledOnlyItems = ["RECORD_REPOSITORIES", "DESCRIPTION", "FINAL_APPROVED", "CUSTODIAL_ORGANIZATION", "WORKING_PAPERS", "STORED_ELSEWHERE", "RETENTION_REQUIREMENTS", "YEARS_AVAILABLE", "YEARS_TRANSFERRED"];

	    var columnsAvailableList = new Array();
	    $('#columnsAvailable option').each(function () {
	        columnsAvailableList.push($(this).val());
	    });

	    updateBothItems(1);
	    updateScheduledItems(1);
	    updateUnscheduledItems(1);
	    sortColumns();
	    checkUpDownButtons();
	    checkAddAllButtons();
	    checkRemoveAllButtons();
	    checkSortByList();
	    updateFilters();

	    function checkSortByList() {
	        if ($('#selectedColumns option').length) {
	            $("#orderByColumn option[value='0']").remove();
	        } else {
	            $('#orderByColumn').append("<option value='0'>-Select-</option>");
	        }
	    }
	    $('#button_add').click(function () {
	        $('#columnsAvailable option:selected').each(function () {
	            var optionExists = ($("#selectedColumns option[value='" + $(this).val() + "']").length > 0);
	            if (!optionExists) {
	                $('#selectedColumns').append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option>");
	                $('#orderByColumn').append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option>");
	                //Grey out the Available columns option.
	                $(this).addClass("listOptionGrey");
	            }
	        });
	        $('#columnsAvailable').trigger('change');
	        $('#selectedColumns').trigger('change');
	    });
	    $('#button_remove').click(function () {
	        $('#selectedColumns option:selected').each(function () {
	            $(this).remove();
	            //Un-Grey out the Available columns option.
	           ...