Squarespace 7.1 标签分节切换非目标区块隐藏失效问题求助

我正在Squarespace 7.1环境下实践Will Myers的教程内容，教程地址：https://www.youtube.com/watch?v=4_fvE8mO1ic&t=26s
对应的实时测试页面地址：https://www.thesquaresandbox.com/tabbed-sections
当前遇到的功能异常：点击标签按钮时，对应目标区块可以正常显示，但另外两个按照预设逻辑应当被隐藏的区块并未正常隐藏，需要相关开发经验的开发者提供问题排查思路与解决方案。
以下为实现该功能编写的全部自定义代码：

JavaScript 代码 #

function tabOneClick() {
  $('button.tab-btn:nth-of-type(1)').addClass("active");
  $('button.tab-btn:nth-of-type(2)').removeClass("active");
  $('button.tab-btn:nth-of-type(3)').removeClass("active");  
  
  $('[data-section-id="6069af192a871859f3dddfc3"]').addClass("tab-section-show");
  $('[data-section-id="6069af0fd446556b94c10177"]').removeClass("tab-section-show");
  $('[data-section-id="6069bad471b2824d888bdf66"]').removeClass("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");
  
  $('[data-section-id="6069af192a871859f3dddfc3"]').removeClass("tab-section-show");
  $('[data-section-id="6069af0fd446556b94c10177"]').addClass("tab-section-show");
  $('[data-section-id="6069bad471b2824d888bdf66"]').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");
  
  $('[data-section-id="6069af192a871859f3dddfc3"]').removeClass("tab-section-show");
  $('[data-section-id="6069af0fd446556b94c10177"]').removeClass("tab-section-show");
  $('[data-section-id="6069bad471b2824d888bdf66"]').addClass("tab-section-show");
}

$(function() {
  $('[data-section-id="6069af192a871859f3dddfc3"]').addClass("tab-section-hide");
  $('[data-section-id="6069af0fd446556b94c10177"]').addClass("tab-section-hide");
  $('[data-section-id="6069bad471b2824d888bdf66"]').addClass("tab-section-hide");
  tabOneClick();
});

CSS 代码 #

.tabs-container{
  transform:translateY(100%);
  width:100% !important;
  text-align:center;
  border-bottom: 1px solid #999;
  overflow: auto;
  overflow-x:auto;
  white-space: nowrap;
  z-index:99;
}
.tab-btn{
  max-width:150px;
  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{
  background:lightblue;
}

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

HTML 代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="tabs-container">
  <button class="tab-btn" id="tab-1" onclick="tabOneClick()">
    About
  </button>
  <button class="tab-btn" id="tab-2" onclick="tabTwoClick()">
    Gallery
  </button>
  <button class="tab-btn" id="tab-3" onclick="tabThreeClick()">
    Contact
  </button>
</div>

内容的提问来源于stack exchange，提问作者Steven Greenbaum