Button not being animated

Stuck on this problem for 2 days, Whenever i click a button in the top bar, it doesnt get animated. its width should increase and its left-border-color should turn green. however that isnt whats happening. I am using svelte and i am really new to it so the code quality is powerpoint quality.
The Code:

<script lang="ts">
  export let name;

  function onTopBarBtnClick(tab) {
        let tabButton = document.getElementsByClassName('topbarbtn ' + tab)[0]
        tabButton.classList.add('selected')
  }
</script>

<main>
  <nav class='topbar'>
    <label class="websitenameinfo">{name}</label>

    <button on:click={() => onTopBarBtnClick('1')} class="topbarbtn 1">Servers</button>
    <button on:click={() => onTopBarBtnClick('2')} class="topbarbtn 2">Events</button>
    <button on:click={() => onTopBarBtnClick('3')} class="topbarbtn 3">Store</button>
    <button on:click={() => onTopBarBtnClick('4')} class="topbarbtn 4">Info</button>
  </nav>
</main>

<style>
    .topbar {
        position: absolute;
        width: 100vw;
        height: 8vh;
        top: 0vh;
        left: 0vw;
        background-color: #1c1c1c;
        box-shadow: 1vh 1vh 2.8vh rgba(28, 28, 28, 0.8);
    }
    .websitenameinfo {
        position: absolute;
        top: 1vh;
        left: 1vw;
        text-transform: uppercase;
        font-family: Tahoma;
        font-size: 4.7vh;
        background: -webkit-linear-gradient(#2071cd, #0ac7ba);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      text-shadow: 0px 0px 3vh #579dffb3;
        font-weight: 800;
    }
    .topbarbtn {
        width: 10.1vw;
        height: 8vh;
        float: right;
        border-radius: 0px;
        background: -webkit-linear-gradient(#20cd31, #0ac7ba);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      text-shadow: 0px 0px 3vh #15ffbd5e,
                                 0px 0px 1.5vh #1573ff66;
        font-weight: 600;
        font-family: Tahoma;
        font-size: 3.8vh;
        border-image: linear-gradient();
        border-width: 0px;
        border-left-width: 0.1vw;
        border-color: rgb(45, 45, 45);
        color: rgb(52, 52, 52);
        vertical-align: top;
    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.3, 1);
    }
    .selected {
            border-color: #0af05e;
            width: 15vw;
            border-left-width: 0.27vw;
            text-shadow: 0px 0px 3vh #6fffd6da, 0px 0px 1.6vh #84ff106d;
    }
</style>

I tried basically all i could search on the internet, nothing worked. i expected the buttons width to expand and the left border color to turn green. however instead what happens is, clicking on it does ABSOLUTELY nothing for some reason. ig its a issue with how i am adding ‘selected’ to the classlist but i am not sure.