JSFiddle - React, Tailwind, and code Playground

by Draven

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 Goblin Warrior" />
    </div>Goblin description.
    <br>Warrior Description</div>
<div class="class-info male-goblin-warrior">
    <div class="avatar-box">
     ...

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);