Computed Style doesn't show, graphically

I have a vertical navbar. When the client is on the website and viewing a section of the page that corresponds to the navbar button, that button should have a white border around it. When the client leaves that section for another section, that button should have a border around it and the last buttons border should disappear. Unfortunately, only half of this works. I don't know why but when I scroll to another section the last sections corresponding button doesn't lose it's border, even though the debug messages state that the border color has been computed to be 'transparent'.

I've tried setting all faces of the border to transparent (top, bottom, left, right) and I've tried setting the style is jquery. I did look for similar problems to mine on SO, as well as contact other developers of the same profession in various development community guilds on Discord.

    let activeButton = document.getElementById('testId');
    activeButton.style.borderColor = 'transparent';
    let computedStyle = window.getComputedStyle(activeButton);
    console.log(`Computes style border color: ${computedStyle.borderTopColor}`);

I had expected the border to change from white to transparent. However, all I got was no change to the color of the border of the button of the section I had previously been looking at on the website:

Before Movement: https://gyazo.com/77171adefe255973709f11e305bfb030 After Movement: https://gyazo.com/b121d1d33b4f5f205df1468cd936352b

Source Before Movement: https://gyazo.com/92359267cf06cbe3b7c4942f04dbf9ea Source After Movement: https://gyazo.com/7cc03865e17fc42382774747fb30052a

Github Project File: https://github.com/TheMasteredPanda/Portfolio-Website/blob/master/src/scripts/src/navbarBorderManagement.js#L32