JSFiddle - React, Tailwind, and code Playground

HTML

<select id="genre" name="genre">
    <option value="">-Select-</option>
    <option value="locked_accounts">Locked Accounts</option>
    <option value="traditional">Traditional</option>
</select>
<div id="categories">
Categories
</div>

JavaScript

var OPTIONS_MAP = {
    locked_accounts: [
        { value: 'USERNAME NOT IN', text: 'USERNAME NOT IN' },
        { value: 'LOCKDATE <=', text: 'LOCKDATE <=' }
    ],
    dblink: [
        { value: 'OWNER=', text: 'OWNER=' },
        { value: 'older', text: 'Older' },
        { value: 'oldest', text: 'Oldest' }
    ]
};

$('#genre').change(function() {
    $('#categories').empty();

    var options = OPTIONS_MAP[$('#genre').val()];
    if (options) {
        $.each(options, function() {
            $('<label>' + this.value + '&nbsp <input type="text" value="'
                    + this.value + '" /></label><br />').appendTo('#categories'); 
        });
    } else {
        $('#categories').append('Categories go here');
    }
});