JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" method="post" name="create" target="_top">
    <fieldset>
        <ul class="create">
            <li>
                <label class="label" for="character_name">Character Name:</label>
                <input class="text" type="text" name="character_name" id="character_name" />
            </li>
            <li>
                <label class="label" for="character_gender">Gender:</label>
                <select class="character_gender select" name="character_gender" id="character_gender">
                    <option class="option" value="1">Female</option>
                    <option class="option" value="2">Male</option>
                </select>
            </li>
            <li>
                <label class="label" for="character_race">Character Race:</label>
                <select class="character_race select" name="character_race" id="character_race">
                    <option class="option" value="1">Goblin</option>
                    <option class="option" value="2">Human</option>
                    <option class="option" value="3">Undead</option>
                </select>
            </li>
            <li>
                <label class="label" for="character_class">Character Class:</label>
                <select class="character_class select" name="character_class" id="character_class">
                    <option class="option" value="1">Warrior</option>
                    <option class="option" value="2">Wizard</option>
                </select>
            </li>
            <li>
                <input class="submit-create-character" type="submit" name="create_character" value="Create" />
            </li>
        </ul>
    </fieldset>
</form>
<div class="class-info female-goblin-warrior">
  <div class="avatar-box"><img src="Female.Goblin.Warrior.gif" alt="Female Warrior" /></div>
  Goblin description.<br>
  Warrior Description
</div>
<div class="class-info male-goblin-wizard">
  <div class="avatar-box"><img...

CSS

.class-info {display: none}

JavaScript

var buildCharacter = function() {
    var character = {
        properties: {
            gender: '',
            race: '',
            class: ''
        },
        getCss: function() {
             return (this.properties.gender+'-'+this.properties.race+'-'+this.properties.class).toLowerCase();
        }
    };
    
    for (var prop in character.properties) {
        character.properties[prop] = $('#character_'+prop+' :selected').text();
    }
    
    $('.class-info').hide();
    $('.'+character.getCss()).show();
};
buildCharacter();
$('.select').on('change', buildCharacter);