В цепочке выбираются соответствующие обновления после события Math.random()

Question

Я переношу свой любимый проект Excel на HTML и javascript. Мне нужно, чтобы дочерние выборки оставались ограниченными родительским выбором во время перетасовки. В настоящее время связанные выборки прекрасно работают при ручном выборе, но когда я перетасовываю форму, дочерний цепной выбор рандомизирует весь свой пул независимо от того, что выбирает его родитель.

Сценарий:

      var raceSubRace = {
    dwarf: ["Mountain Dwarf", "Hill Dwarf"],
    elf: ["High Elf", "Drow Elf"],
    human: ["Melanistic Human", "Amelanistic Human"]
    };
    $(function(){
    $('#race').change(function() {
        var x= $('#race').val();
        $('#subRace').html("");
        for(index in raceSubRace[x]) {
            $('#subRace').append('<option value="' + raceSubRace[x][index] + '">' + raceSubRace[x][index] + '</option>')
        };
    }).change();
;})

function race() {
    document.getElementById("shuffle").addEventListener("click", function() {
        var select = document.getElementById("race");
        var items = select.getElementsByTagName("option");
        var index = Math.floor(Math.random() * items.length);
        select.selectedIndex = index;
        console.log(select.selectedIndex);
    })
}

function subRace() {
    document.getElementById("shuffle").addEventListener("click", function() {
        var select = document.getElementById("subRace");
        var items = select.getElementsByTagName("option");
        var index = Math.floor(Math.random() * items.length);
        select.selectedIndex = index;
        console.log(select.selectedIndex);
    })
}

HTML:

                  <div>
                <label>Race</label>
                <select class="charSheet" id="race" name="race">
                    <option value="dwarf">Dwarf</option>
                    <option value="elf">Elf</option>
                    <option value="human">Human</option>
                </select>
                <label>Sub Race</label>
                <select class="charSheet" id="subRace" name="subRace">
                </select><strong> Note; selection pool will depend on base Race.</strong>
            </div>
        <button id="shuffle" type="button" onclick="shuffle()">Shuffle Form Items</button>

Пока все, о чем я думаю, - это кнопка shuffle2, предназначенная для нажатия после перемешивания, но я не уверен, что это вообще сработает, и это не идеально.