JSFiddle - React, Tailwind, and code Playground

HTML

<h3 id="charNameListHeader">Select Your Toon: <span id="selectedToon"></span></h3>
    <ul id="charNameList" style="display:none;">
        <li data-toonID="1"><span class="priest">Alastriia</li>
        <li data-toonID="2"><span class="paladin">Aleathà</li>
        <li data-toonID="3"><span class="warrior">Arghra</li>
        <li data-toonID="4"><span class="druid">Autumnal</li>
        <li data-toonID="5"><span class="rogue">Beerisbadmmk</li>
        <li data-toonID="6"><span class="priest">Biip</li>
        <li data-toonID="7"><span class="mage">Blazeglory</li>
        <li data-toonID="8"><span class="druid">Blaçk</li>
        <li data-toonID="9"><span class="warlock">Braylna</li>
        <li data-toonID="10"><span class="warlock">Brileah</li>
    </ul>
    <input type="hidden" id="selectedToonInput" />

JavaScript

$('#charNameListHeader').click( function() {
        $(this).next().toggle();
    });
    $('#charNameList li').click( function() {
        var selectedValue = $(this).attr('data-toonID');
        $('#selectedToonInput').val(selectedValue);
        var newToon = $(this).children('span').clone();
        $('#selectedToon').html(newToon);
        $('#charNameList').hide();
    });