JSFiddle - React, Tailwind, and code Playground

by JakobJingleheimer

HTML

<input type="button" value="click to fade in" />

<div id="p1b" style="display:none;">
<ul id="state">
    <li>What state do you live in?</li>
    <li><select>
        <option value="-9" selected="selected"></option>
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AS">American Samoa</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
    </select></li>
</ul>

JavaScript

function fadeOUT_sect(id) {
    if ($("#" + id).css("display") != "none") {
        $("#" + id).fadeOut();
        $("#" + id).find("ul").each(function() {
            var name = $(this).attr("id");
            //$(this).find("input").removeAttr("checked");
            if (!($(this).find("select > option:first").val("9999"))) {
                $(this).find("select > option:first").attr({
                    value: "9999",
                    selected: "selected"
                }); // $.attr()
            } // if select
            if (!($(this).find('input[value="9999"]').val())) {
                $(this).find('input[type="text"]').val('');
                $(this).append('<input name="' + name + '" type="radio" value="9999" checked="checked" />');
            } // if
        }); // $.each()
    } // if
} // function


function fadeIN_sect(id) {
    $("#" + id + ' > ul > input[value="9999"]').remove();
    $("#" + id + " > ul > li > select > option:first").attr("value", "").removeAttr("selected");
    $("#" + id).fadeIn();
}


$('input[type="button"]').click(function() {
    fadeIN_sect("p1b");
});