How to dynamically add elements to a element with vanilla JS?

I am trying to dynamically add two options to a <select> dropdown based on previous options selected. For lack of a better analogy, its kinda like the NCAA March madness bracket.
There are two choices a user can pick, and then from there that selection choosen, moves on to the next head to head choice, and the bracket will have the selected options in the dropdown to choose from, if the previous has not been selected then the drop down is blank.

<div class="top">
    <select name="c01_T" id="c01_T" class="choice-select" onclick="refresh(id)">
        <option value="none">Select Me</option>
        <option value="Choice 1">Choice 1</option>
        <option value="Choice 2">Choice 2</option>
    </select>
</div>
<div class="bot">
    <select name="c01_B" id="c01_B" class="choice-select" onclick="refresh(id)">
        <option value="none">Select Me</option>
        <option value="Choice 3">Choice 3</option>
        <option value="Choice 4">Choice 4</option>
        </select>
</div>
<div class="top">
    <select name="c09_T" id="c09_T" class="choice-select" onclick="refresh(id)">
        <option value="none">Select Me</option>
    </select>
</div>
<div class="bot">
    <select name="c09_B" id="c09_B" class="choice-select" onclick="refresh(id)">
        <option value="none">Select Me</option>
    </select>
</div>

<div class="bot">
    <select name="c13_T" id="c13_T" class="choice-select" onclick="refresh(id)">
        <option value="none">Select Me</option>
    </select>
</div>

then my vanilla JS function is this..

var idHome, idAway, textH, textA;
function refresh(id) {
    idHome, idAway, textH, textA = null;
    if (id == "c09_T") {
        x = document.getElementById('c01_T').selectedIndex;
        textH = document.getElementsByTagName("option")[x].value;
        y = document.getElementById('c01_B').selectedIndex;
        textA = document.getElementsByTagName("option")[y].value;
        
    } else if (id == "c09_B") {
        x = document.getElementById('c08_T').selectedIndex;
        textH = document.getElementsByTagName("option")[x].value;
        y = document.getElementById('c08_B').selectedIndex;
        textA = document.getElementsByTagName("option")[y].value;
        
    } else if (id == "c13_T") {
        x = document.getElementById('c09_T').selectedIndex;
        textH = document.getElementsByTagName("option")[x].value;
        y = document.getElementById('c09_B').selectedIndex;
        textA = document.getElementsByTagName("option")[y].value;
    } else if (id == "c13_B") {
        x = document.getElementById('c10_T').selectedIndex;
        textH = document.getElementsByTagName("option")[x].value;
        y = document.getElementById('c10_B').selectedIndex;
        textA = document.getElementsByTagName("option")[y].value;
    }   
    if (textH !== "none" && textA !== "none") {
       teamSelect = document.getElementById(id);
       teamSelect.options.length = 2; //set length at 3 in case select is clicked more than once
       teamSelect.remove(1); //remove options and reset in case its clicked more than once
       teamSelect.remove(2); //remove options and reset in case its clicked more than once
    
       teamSelect.add(new Option(textH, textH)); // add option 1
       teamSelect.add(new Option(textA, textA)); // add option 2    
    }   
}

The problem is that its showing the <options> in the dropdown in the browser…but regardless of which one I select it always returns the second option (index 1)…the one that’s not the first “Select me” option.
Why wont the <select> element show the selected option?
Thanks for any help!