How to link back/page jump to tabbed section using Javascript

Site password: 1234
https://seabass-tunny-9z8d.squarespace.com/mba-fellowship

I am using the following code (from Will Meyers, thank you Will haha) to create a simple tab section, similar to what used to be available in 7.0 using index pages.

The design my client gave my has buttons in other sections of the same page, that reference content on these tabs. I am trying to figure out what JS I can write to allow me to open the tab on click and move to user to the appropriate section. 

I was thinking of creating a event listener that is watching for a button click with the corresponding section ID, which would then call the existing functions that open/close the necessary tabs, however I'm struggling to get it right so I thought I would reach out here for help! 

This is my current code: 

<script>
  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");
    $('button.tab-btn:nth-of-type(4)').removeClass("active");
    $('button.tab-btn:nth-of-type(5)').removeClass("active");
    $('button.tab-btn:nth-of-type(6)').removeClass("active");
    
	<!--Section One-->
    $('[data-section-id="6526191d4d7074473f1a59a8"]').addClass("tab-section-show");
    
	<!--Section Two, both belong to section #2-->
    $('[data-section-id="65261a080411162103e3086b"]').removeClass("tab-section-show");
    $('[data-section-id="65261ab44dacb96edf73dc16"]').removeClass("tab-section-show");
    
    <!--Section Three-->
    $('[data-section-id="65261e2513a59220550930fa"]').removeClass("tab-section-show");
    <!--Section Four-->
    $('[data-section-id="65261e497a97df2f9d86e841"]').removeClass("tab-section-show");
    <!--Section Five-->
    $('[data-section-id="65261e91a8cb8755ec551665"]').removeClass("tab-section-show");
    <!--Section Six-->
    $('[data-section-id="65261ebe0f2b7057ba6336a3"]').removeClass("tab-section-show");
    window.Squarespace.initializeLayoutBlocks(Y);
  }


  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");
    $('button.tab-btn:nth-of-type(5)').removeClass("active");
    $('button.tab-btn:nth-of-type(6)').removeClass("active");
	
    <!--Section One-->
    $('[data-section-id="6526191d4d7074473f1a59a8"]').removeClass("tab-section-show");
    
    <!--Section Two, both belong to section #2-->
    $('[data-section-id="65261a080411162103e3086b"]').addClass("tab-section-show");
    $('[data-section-id="65261ab44dacb96edf73dc16"]').addClass("tab-section-show");
    
    <!--Section Three-->
    $('[data-section-id="65261e2513a59220550930fa"]').removeClass("tab-section-show");
    <!--Section Four-->
    $('[data-section-id="65261e497a97df2f9d86e841"]').removeClass("tab-section-show");
    <!--Section Five-->
    $('[data-section-id="65261e91a8cb8755ec551665"]').removeClass("tab-section-show");
    <!--Section Six-->
    $('[data-section-id="65261ebe0f2b7057ba6336a3"]').removeClass("tab-section-show");
    window.Squarespace.initializeLayoutBlocks(Y);
  }


  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");
    $('button.tab-btn:nth-of-type(5)').removeClass("active");
    $('button.tab-btn:nth-of-type(6)').removeClass("active");
	
    <!--Section One-->
    $('[data-section-id="6526191d4d7074473f1a59a8"]').removeClass("tab-section-show");
    <!--Section Two-->
    $('[data-section-id="65261a080411162103e3086b"]').removeClass("tab-section-show");
    $('[data-section-id="65261ab44dacb96edf73dc16"]').removeClass("tab-section-show");
    <!--Section Three-->
    $('[data-section-id="65261e2513a59220550930fa"]').addClass("tab-section-show");
    <!--Section Four-->
    $('[data-section-id="65261e497a97df2f9d86e841"]').removeClass("tab-section-show");
    <!--Section Five-->
    $('[data-section-id="65261e91a8cb8755ec551665"]').removeClass("tab-section-show");
    <!--Section Six-->
    $('[data-section-id="65261ebe0f2b7057ba6336a3"]').removeClass("tab-section-show");
    window.Squarespace.initializeLayoutBlocks(Y);
  }


    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");
    $('button.tab-btn:nth-of-type(5)').removeClass("active");
    $('button.tab-btn:nth-of-type(6)').removeClass("active");
	
      <!--Section One-->
    $('[data-section-id="6526191d4d7074473f1a59a8"]').removeClass("tab-section-show");
    <!--Section Two-->
    $('[data-section-id="65261a080411162103e3086b"]').removeClass("tab-section-show");
    $('[data-section-id="65261ab44dacb96edf73dc16"]').removeClass("tab-section-show");
    <!--Section Three-->
    $('[data-section-id="65261e2513a59220550930fa"]').removeClass("tab-section-show");
      <!--Section Four-->
    $('[data-section-id="65261e497a97df2f9d86e841"]').addClass("tab-section-show");
      <!--Section Five-->
    $('[data-section-id="65261e91a8cb8755ec551665"]').removeClass("tab-section-show");
      <!--Section Six-->
    $('[data-section-id="65261ebe0f2b7057ba6336a3"]').removeClass("tab-section-show");
    window.Squarespace.initializeLayoutBlocks(Y);
  }

      function tabFiveClick() {
    $('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)').removeClass("active");
    $('button.tab-btn:nth-of-type(5)').addClass("active");
    $('button.tab-btn:nth-of-type(6)').removeClass("active");

    <!--Section One-->
    $('[data-section-id="6526191d4d7074473f1a59a8"]').removeClass("tab-section-show");
    <!--Section Two-->
    $('[data-section-id="65261a080411162103e3086b"]').removeClass("tab-section-show");
    $('[data-section-id="65261ab44dacb96edf73dc16"]').removeClass("tab-section-show");
    <!--Section Three-->
    $('[data-section-id="65261e2513a59220550930fa"]').removeClass("tab-section-show");
    <!--Section Four-->
    $('[data-section-id="65261e497a97df2f9d86e841"]').removeClass("tab-section-show");
    <!--Section Five-->
    $('[data-section-id="65261e91a8cb8755ec551665"]').addClass("tab-section-show");
    <!--Section Six-->
    $('[data-section-id="65261ebe0f2b7057ba6336a3"]').removeClass("tab-section-show");
    window.Squarespace.initializeLayoutBlocks(Y);
  }

      function tabSixClick() {
    $('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)').removeClass("active");
    $('button.tab-btn:nth-of-type(5)').removeClass("active");
    $('button.tab-btn:nth-of-type(6)').addClass("active");

    <!--Section One-->
    $('[data-section-id="6526191d4d7074473f1a59a8"]').removeClass("tab-section-show");
    <!--Section Two-->
    $('[data-section-id="65261a080411162103e3086b"]').removeClass("tab-section-show");
    $('[data-section-id="65261ab44dacb96edf73dc16"]').removeClass("tab-section-show");
    <!--Section Three-->
    $('[data-section-id="65261e2513a59220550930fa"]').removeClass("tab-section-show");
    <!--Section Four-->
    $('[data-section-id="65261e497a97df2f9d86e841"]').removeClass("tab-section-show");
    <!--Section Five-->
    $('[data-section-id="65261e91a8cb8755ec551665"]').removeClass("tab-section-show");
    <!--Section Six-->
    $('[data-section-id="65261ebe0f2b7057ba6336a3"]').addClass("tab-section-show");
    window.Squarespace.initializeLayoutBlocks(Y);
  }
  
  $(function() {
    $('[data-section-id="6526191d4d7074473f1a59a8"]').addClass("tab-section-hide");
    $('[data-section-id="65261a080411162103e3086b"]').addClass("tab-section-hide");
    $('[data-section-id="65261ab44dacb96edf73dc16"]').addClass("tab-section-hide");
    $('[data-section-id="65261e2513a59220550930fa"]').addClass("tab-section-hide");
    $('[data-section-id="65261e497a97df2f9d86e841"]').addClass("tab-section-hide");
    $('[data-section-id="65261e91a8cb8755ec551665"]').addClass("tab-section-hide");
    $('[data-section-id="65261ebe0f2b7057ba6336a3"]').addClass("tab-section-hide");
    
    tabOneClick();
    
  });
</script>

Sorry it's long-- I have a quite few sections and it's so it's a bit repetitive. 

But again, there are additional sections on this page that have buttons linking to various pages and I'm curious as to what the best way to cleanly write this out would be. The page I linked has an example of this. There is a tab called "How to apply" and a button further down with the same verbiage that needs to link to this tabbed section. I put the JS in the header to it would be easier to reference back to the functions above.

I am open to any and all suggestions, and would also be happy to pay someone to teach me! 🙂 Thank you! 

@tuanphan I would be so happy to pay you for your brain! 🙂

Just to add on, I was thinking of something link this, but I can ofc ourse not add a ID to the squarespace buttons.

const button = document.getElementById('how-to-apply');

// Add a click event listener to the button
button.addEventListener('click', function() {

  // Call fuction that triggers appropriate section
  tabFourClick()

});

But I'm not sure if there is a better way to go about this

Use this tool to find button block id

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

@RebeccaRichard did you figure this out? I'm trying to achieve the same thing but nothing I try is working. 😕