Setting a keyword category filter on website

Site URL: https://paddlefish-cube-wsst.squarespace.com/

Draft website - https://paddlefish-cube-wsst.squarespace.com/
Password - 1234
Page - Our Projects & News

---

Hi there, really need help on the below! 😭

I have been working on the "Our Project" page to set up a filter per keyword category. 
I have been following the steps as per this video - https://www.youtube.com/watch?v=4_fvE8mO1ic

I have inserted the JQuery code on the footer of the website.

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

----
Below are the issues I am facing. 

1. I am unable to see an underline when a category/button is activated.

CSS code used: 

.tabs-container{
  transform:translateY(100%);
  width:100% !important;
  text-align:center;
  border-bottom: none !important;
  overflow: auto;
  overflow-x:auto;
  white-space: nowrap;
  z-index:99;
}
.tab-btn{
  max-width:200px;
  display: inline-block;
  border-radius:3px 3px 0 0;
  border:1px solid #999;
  padding: 12px 18px;
  font-size:1.2em;
  background:white;
  margin-bottom:none !important;
  border:none !important;
  &:not(:first-of-type){
  margin-left:10px;
  }
}
.tab-btn.active{
  border-bottom: 1px solid #999;
}

section.tab-section-hide{
  display:none;
}
section.tab-section-show{
  display:flex;
}

 2. I have made 4 separate sections, one for each category mentioned, and have used the "inspect" function to place the specific "data-section-id" to each button but they do not work when clicked...

Code used: 

<div class="tabs-container">
  <button class="tab-btn" id="tab-1" onclick="tabOneClick()">
    All
  </button>
  <button class="tab-btn" id="tab-2" onclick="tabTwoClick()">
    Property Strategy
  </button>
  <button class="tab-btn" id="tab-3" onclick="tabThreeClick()">
    Commercial Design 
  </button>
  <button class="tab-btn" id="tab-4" onclick="tabFourClick()">
    Project Management
  </button>
</div>

<!--Be sure jQuery is loaded on your site.-->
<script>
  function tabOneClick() {
    $('button.tab-btn:nth-of-type(1)').addClass("active");
    $('button.tab-btn:nth-of-type(2)').addClass("active");
    $('button.tab-btn:nth-of-type(3)').addClass("active");
    $('button.tab-btn:nth-of-type(4)').addClass("active");


    $('[data-section-id="6281bcaef7f8387797bd28b0""]').addClass("tab-section-show");
    $('[data-section-id="Section-2"]').addClass("tab-section-show");
    $('[data-section-id="Section-3"]').addClass("tab-section-show");
    $('[data-section-id="Section-4"]').addClass("tab-section-show");
  }


  function tabTwoClick() {
    $('button.tab-btn:nth-of-type(1)').removeClass("active");
    $('button.tab-btn:nth-of-type(2)').addClass("active");
    $('button.tab-btn:nth-of-type(3)').removeClass("active");
    $('button.tab-btn:nth-of-type(4)').removeClass("active");

    $('[data-section-id="Section-1"]').removeClass("tab-section-show");
    $('[data-section-id="6282cc1441bfaf47fae38755"]').addClass("tab-section-show");
    $('[data-section-id="Section-3"]').removeClass("tab-section-show");
    $('[data-section-id="Section-4"]').removeClass("tab-section-show");
  }


  function tabThreeClick() {
    $('button.tab-btn:nth-of-type(1)').removeClass("active");
    $('button.tab-btn:nth-of-type(2)').removeClass("active");
    $('button.tab-btn:nth-of-type(3)').addClass("active");
    $('button.tab-btn:nth-of-type(4)').removeClass("active");
    
    $('[data-section-id="Section-1"]').removeClass("tab-section-show");
    $('[data-section-id="Section-2"]').removeClass("tab-section-show");
    $('[data-section-id="6282cd9f41bfaf47fae3ce2f"]').addClass("tab-section-show");
    $('[data-section-id="Section-4"]').removeClass("tab-section-show");
  }

   function tabFourClick() {
    $('button.tab-btn:nth-of-type(1)').removeClass("active");
    $('button.tab-btn:nth-of-type(2)').removeClass("active");
    $('button.tab-btn:nth-of-type(3)').removeClass("active");
    $('button.tab-btn:nth-of-type(4)').addClass("active");
    
    $('[data-section-id="Section-1"]').removeClass("tab-section-show");
    $('[data-section-id="Section-2"]').removeClass("tab-section-show");
    $('[data-section-id="Section-3"]').removeClass("tab-section-show");
    $('[data-section-id="6282ce4a50903a13c91d449c"]').addClass("tab-section-show");
  }


  $(function() {
    $('[data-section-id="Section-1"]').addClass("tab-section-hide");
    $('[data-section-id="Section-2"]').addClass("tab-section-hide");
    $('[data-section-id="Section-3"]').addClass("tab-section-hide");
    $('[data-section-id="Section-4"]').addClass("tab-section-hide");
    tabOneClick();
  });

Your help will be greatly appreciated... 

Thank you so much!!!!

#1. Edit this CSS code

.tab-btn {
    max-width: 200px;
    display: inline-block;
    border-radius: 3px 3px 0 0;
    border: 1px solid #999;
    padding: 12px 18px;
    font-size: 1.2em;
    background: #fff;
    margin-bottom: none !important;
    border: none !important;
}

to this

.tab-btn {
    max-width: 200px;
    display: inline-block;
    border-radius: 3px 3px 0 0;
    border: 1px solid #999;
    padding: 12px 18px;
    font-size: 1.2em;
    background: #fff;
    margin-bottom: 0 !important;
}
.tab-btn:not(.active) {
	border: none !important;
}