JSFiddle - React, Tailwind, and code Playground

by JakobJingleheimer

HTML

<ul id="m_mlt_t">
<li>How long have you known <span class="nom">__</span>?</li>
    <li><input name="m_mlt_n" type="text" maxlength="3" /> <select name="m_mlt_t"><option></option><option>days</option><option>months</option><option>years</option></select></li>
    <li><input name="m_mlt_n" type="radio" value="777" />I prefer not to answer</li>
    <li><input name="m_mlt_n" type="radio" value="999" />Don't know</li>
    <li><span class="m_mlt_t" style="display:none;"></span></li>
</ul>

JavaScript

$('select[name="m_mlt_t"], input[name="m_mlt_n"]').change(function() {
    var time = $('input[name="m_mlt_n"]').val();
        $("span#m_mlt_t").text(time);
        $("span#m_mlt_t").fadeIn();
    var period = $('select[name="m_mlt_t"]').val();
        $("span#m_mlt_t").append(" " + period);
        $("span#m_mlt_t").fadeIn();
});

// the rest of the code is fine
$('input[name="m_mlt_n"]').keyup(function(event) {
    this.value = this.value.replace(/[\D]/gi, "");
});
$('input[name="m_mlt_n"][type="text"]').click(function() {
    $('input[name="m_mlt_n"][type="radio"]').removeAttr('checked');
    $('select[name="m_mlt_t"]').prop("disabled", false).children("option:first").val("").removeAttr("selected", "selected");
});
$('input[name="m_mlt_n"][type="radio"]').click(function() {
    $('input[name="m_mlt_n"][type="text"]').val('');
    var val = this.value;
    $('select[name="m_mlt_t"]').prop("disabled", true).children("option:first").val(val).attr("selected", "selected");
});