JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<form method="POST" action="http://localhost/index.php/addRecord/3791514" accept-charset="UTF-8" id="new_record" class="new_record" switch-on="#record_record_type">
    <input name="_token" type="hidden" value="y5v6GKri5JJdHbzxHKYrU3iSmcTVUl1ezctVNLfo">
    <div style="margin:0;padding:0;display:inline">
        <input name="utf8" type="hidden" value="&#x2713;" />
    </div>
    <dl class='standard record'> <dt><label for="record_record_type">Type</label></dt>

        <dd>
            <select id="record_record_type" name="record[record_type]">
                <option value="a" selected="selected">A</option>
                <option value="cname">CNAME</option>
                <option value="mx">MX</option>
            </select>
        </dd>
    </dl>
    <dl class='standard'> <dt><label for="record_name">Name</label></dt>

        <dd>
            <input id="record_name" name="record[name]" size="30" type="text" />
        </dd>
    </dl>
    <dl class='standard type a' show-when="a"> <dt><label for="record_data">IP Address</label></dt>

        <dd>
            <input id="record_data" name="record[data]" placeholder="e.g. 1.2.3.4" size="30" type="text" />
        </dd>
    </dl>
    <dl class='standard type cname ns' show-when="mx"> <dt><label for="record_data">Hostname</label></dt>

        <dd>
            <input id="record_data" name="record[data]" size="30" type="text" />
        </dd>
    </dl>
    <dl class='standard type mx' show-when="mx"> <dt><label for="record_data">Mail Server Hostname</label></dt>

        <dd>
            <input id="record_data" name="record[data]" size="30" type="text" />
        </dd> <dt><label for="record_aux">Priority</label></dt>

        <dd>
            <input id="record_aux" name="record[priority]" size="30" type="text" />
        </dd>
    </dl>
    <dl class='standard type txt'> <dt><label for="record_data">Text</label></dt>

        <dd>
            <textarea cols="40" id="record_data" name="record[data]"...

JavaScript

$("[switch-on]").each(function () {
    var $base = $(this);
    $base.find($base.attr("switch-on")).change(function () {
        var value = $(this).val();
        $base.find("[show-when]").each(function () {
            $(this)[value == $(this).attr("show-when") ? "show" : "hide"]();
        });
    }).change();
});