Double onclick events not working

I have a tab menu on my website and the code used for it works perfectly. JavaScript:

function openTab(tabName) {
    var i;
    var x = document.getElementsByClassName("tab");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    document.getElementById(tabName).style.display = "flex";
}

HTML:

<div class="col-md-4">
    <div onclick="openTab('tab-1')" class="tab-button">
        <h5>IT Problems</h5>
    </div>
</div>
<div class="col-md-4">
    <div onclick="openTab('tab-2')" class="tab-button">
        <h5>Save Time</h5>
    </div>
</div>
<div class="col-md-4">
    <div onclick="openTab('tab-3')" class="tab-button">
        <h5>Cost Effective</h5>
    </div>
</div>

And then obviously I applied the IDs ("tab-[1/2/3]") and classes ("tab") to the divs I want as tabs. However, when I replicate the exact same code to have a tab button highlighted for the current tab open, it doesn't work. JavaScript:

function selectedTab(selectName) {
    var i;
    var x = document.getElementsByClassName("select");
    for (i = 0; i < x.length; i++) {
        x[i].style.border-bottom-color = "#dbdbdb";
    }
    document.getElementById(selectName).style.border-bottom-color = "#25a7df";
}

HTML:

<div class="col-md-4">
    <div onclick="openTab('tab-1'); selectedTab('select-1')" class="tab-button">
        <h5 id="select-1" class="select">IT Problems</h5>
    </div>
</div>
<div class="col-md-4">
    <div onclick="openTab('tab-2'); selectedTab('select-2')" class="tab-button">
        <h5 id="select-2" class="select">Save Time</h5>
    </div>
</div>
<div class="col-md-4">
    <div onclick="openTab('tab-3'); selectedTab('select-3')" class="tab-button">
        <h5 id="select-3" class="select">Cost Effective</h5>
    </div>
</div>

I've looked literally everywhere online and had multiple people look at this and nobody can find a solution. Can anyone help?