JSFiddle - React, Tailwind, and code Playground

by fenderistic

HTML

<form name="input" action="<?php echo URL; ?>jc/write_upaction" method="post" id="derp">
    <label><span style='font-weight: bold;'>Name(s):<input style='width:30%;' type="text" placeholder="Name, Name" name="name" required></span>
    </label>
    <label><span style='font-weight: bold;'>Date:<input style='width:30%;' type="date" placeholder="MM/DD/YYYY" name="date" required></span>
    </label>
    <label for="date"><span style='font-weight: bold;'>Time:<input style='width:30%;' type="time" placeholder="HH:MM" name="time" required></span>
    </label>
    <label for="time"><span style='font-weight: bold;'>Witnesses:<input style='width:30%;' type="text" placeholder="Name, Name" name="witnesses"></span>
    </label>
    <label><span style='font-weight: bold;'>Reason:</span>
    </label>
    <select id="slct" name="reason" style="width:30%;">
        <option value="placeholder">Didn't clean up mess</option>
        <option value="Other">Other, Specify below</option>
    </select>
    </label>
    <textarea form="input" id="txtarea" placeholder="Write your reason here..." name="reason_other" cols="28" rows="5"></textarea>
    <div style="text-align:right;"><span style="font-weight:bold;" id="counter"></span>
    </div>
    <input type="submit" value="Submit">

JavaScript

$("#txtarea").hide();
$( "#slct" ).change(function() {
  var val = $("#slct").val();
    if(val=="Other"){
        $("#txtarea").show();
    } else {
                $("#txtarea").hide();
    }
});