JSFiddle - React, Tailwind, and code Playground

by David Brierton

HTML

<script src="https://code.jquery.com/jquery-1.10.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<table border="0" cellpadding="0" cellspacing="15" style="width: 600px">
  <tr>
    <td><span class="srch_title" for="reporttype">Please select a report:</span>
      <select class="form-control" id="reporttype" name="reporttype">
        <option value="" selected="selected">Select Report</option>
        <option id="checklistreports" value="checklistreports">Checklist Stats</option>
        <option id="locationreports" value="locationreports">Location Stats</option>
      </select>
    </td>
  </tr>
</table>

<form name="generatereport" method="post">

  <table border="0" cellpadding="0" cellspacing="15" style="width: 600px">
    <tr>
      <td id="location" style="display: none;">
        <select name="Location" id="loc" multiple="multiple" size="9">
          <option value="OPERATIONS">Operations</option>
          <option value="CCC">Contact Center</option>
          <option value="QA">QA Department</option>
          <option value="DS">DeSoto</option>
          <option value="PS">Palma Sola</option>
          <option value="LWR">Lakewood Ranch</option>
          <option value="NR">North River</option>
          <option value="SDL">SDL</option>
          <option value="FSC">FSC</option>
        </select>
      </td>
      <td id="locationbtns" style="display: none;">
        <button id="add" type="button">ADD ALL</button>
        <button id="rem" type="button">REMOVE ALL</button>
      </td>
      <td id="locationtextarea" style="display: none;">
        <textarea id="selected" rows="9" readonly></textarea>
      </td>
    </tr>
    <tr>
      <td id="employeelist" style="display: none;">
        <select name="EmployeeName" id="EmployeeName" multiple="multiple" size="9">
          <option value="OPERATIONS">Operations</option>
...

CSS

button {
  border: none;
  outline: none;
  padding: 8px 15px;
  border-radius: 25px;
  font-size: 14px;
  color: #fff;
  opacity: 1;
  display: block;
  width: 150px;
  margin-bottom: 10px;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

#location {
  padding: 0px 0px 10px;
  margin-right: 10px;
}

#EmployeeName {
  padding: 0px 0px 0px;
  margin-right: 10px;
}

#add {
  background: #8BC34A;
}

#rem {
  background: #FF5722;
}

#add1 {
  background: #8BC34A;
}

#rem1 {
  background: #FF5722;
}

textarea {
  border: 1px solid #f2f2f2;
  color: #9E9E9E;
  padding: 8px 15px;
  margin-left: 10px;
}

JavaScript

(function() {
  //move these out since they don't need to 
  const today = new Date();
  let weekAgo = new Date();
  weekAgo.setDate(today.getDate() - 7);
  const $from = $("#StartDate");
  const $to = $("#EndDate");

  $(function() { //DOM-loaded
    //these don't change
    const reportFields = $('#location, #locationbtns, #locationtextarea, #chosendates, #submitbtn, #formattype');
    const employeeFields = $('#employeelist, #employeelistbtns, #employeelisttextarea');
    const loc = $("#loc");
    const EmployeeName = $("#EmployeeName");
    const selectedElement = $('#selected');
    const selected1Element = $('#selected1');
    const reportType = $('#reporttype');
    const generatereportform = $("form[name=generatereport]");
    $(document).click(function(clickEvent) {
      switch (clickEvent.target.id) {
        case 'add':
          setLocationOptionsSelected(true);
          break;
        case 'rem':
          setLocationOptionsSelected(false);
          break;

        case 'add1':
          setSelectedOnEmployeeOptions(true);
          break;
        case 'rem1':
          setSelectedOnEmployeeOptions(false);
          break;
      }
    });
    $(document).change(function(changeEvent) {
      switch (changeEvent.target.id) {
        case 'reporttype':
          handleReportTypeChange();
          break;
        case 'loc':
          handleLocationChange();
          break;
        case 'EmployeeName':
          handleEmployeeNameChange();
          break;
      }
    });

    function handleReportTypeChange() {
      var value = reportType.val();

      if (value === "checklistreports") {
        generatereportform[0].reset();
        reportFields.show();
        loc.prop('required', true);
        employeeFields.show();
        generatereportform.attr("action", "index.cfm?content=reportsassociate");
        EmployeeName.prop('required', true);
      } else if (value === "locationreports") {
        generatereportform[0].reset();
       ...