当我使用javaScript单击元素时,我向元素添加了css规则,但是该规则似乎不起作用

Here is my CSS. My goal was to add the .show rule whenever you clicked on a certain tab so that it would show the neccesary content but it does not work.

#tab-1-content, #tab-2-content, #tab-3-content {
  display: none;
}

.show {
  display: block !important;
}

And this is my entire Javascript page. I put the console.log to see in the console if the show class was being added correctly and it seems like it is whenever I click on it, but it does not show the content like it should.

const tabItems = document.querySelectorAll('.tab-item');
const tabContentItems = document.querySelectorAll('.tab-content-item');

// select tab content item
function selectItem(e) {
  removeBorder();
  removeShow();
  //Add border to current tab
  this.classList.add('tab-border');
  //Grab content item from DOM
  const tabContentItem = document.querySelector(`#${ this.id }-content`);
  //Add show class
  tabContentItem.classList.add('show');
  console.log(tabContentItem)
}

function removeBorder() {
 tabItems.forEach(item => item.classList.remove('tab-border'));

}

function removeShow() {
 tabContentItems.forEach(item => item.classList.remove('show'));
}

// Listen for tab click
tabItems.forEach(item => item.addEventListener('click', selectItem));

My Border variables work as intended, removing the border and adding it to the element I click on. I tried to just make a Netflix Landing Page clone as a bit of a project, here is the link to that website https://netflx.github.io/ . I removed the footer and Replaced the images as my anti-virus would not let me access the site. I tried to do exactly what netflix does, by having the different sections pop up when you click on the different tab elements but it does not do that. It only works for the first tab but does not show the content for the other two tabs. Does anyone know what is going on and how I can fix it?