How can I move between section pages in HTML?

I have some code for something, and I want to make multiple pages. When I click the buttons, nothing at all changes. The previous button should go back one page, change the page number by -1, and get disabled if the page is 1. The next button should go forward one page, change the page number 1, and get disabled if the page is the number of pages. Here is my code:

<!DOCTYPE html>
<html>
  <head>
    <title>7ktTube Modified (more logos) | MoleTech</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <script type="text/javascript" src="main.js"></script>
  </head>
  <body>
    <div class="content-container">
      <section id="1" class="page">
        <div class="container">
          <p>Page 1</p>
        </div>
      </section>
      <section id="2" class="page" hidden>
        <div class="container">
          <p>Page 2</p>
        </div>
      </section>
      <div class="bottomBar">
        <div class="pageControls">
          <button id="prev-btn" onclick="prevPg()">Previous</button>
          <p id="dispPgNum" class="pNoBr">1/2</p>
          <button id="next-btn" onclick="nextPg()">Next</button>
        </div>
      </div>
    </div>
  </body>
</html>

$(document).ready(function(){
  const nextBtn = document.querySelector("#next-btn");
  const prevBtn = document.querySelector("#prev-btn");
  const page = $(".page").attr("id");
  const page1 = document.getElementById("1");
  const page2 = document.getElementById("2");
  const pgNumTxt = document.getElementById("dispPgNum").textContent;
  const url = new URL(window.location.href());
  const params = new URLSearchParams(url.search);
  var pageCt = page.length();
  var pageNum = 1;
  pgNumTxt = 1;
  switch (pageNum) {
    case 1:
      page1.style.visibility = "visible";
      page2.style.visibility = "hidden";
      break;
    case 2:
      page1.style.visibility = "hidden";
      page2.style.visibility = "visible";
      break;
  }

  function nextPg() {
    if (pageNum == pageCt) {
      nextBtn.disabled = true;
    } else {
      nextBtn.disabled = false;
      pageNum + 1;
    }
    pgNumTxt = pageNum + "/" + pageCt;
  }
  function prevPg() {
    if (pageNum == 1) {
      prevBtn.disabled = true;
    } else {
      prevBtn.disabled = false;
      pageNum - 1;
    }
    pgNumTxt = pageNum + "/" + pageCt;
  }
  params.set("page", pageNum);
  url.search = params.toString();
});


for (let i = 0; i < sectionButtons.length; i++) {
  sectionButtons[i].addEventListener("click", function() {
    sections[currentSection].classList.remove("active");
    sectionButtons[currentSection].classList.remove("active");
    sections[currentSection = i].classList.add("active");
    sectionButtons[currentSection].classList.add("active");
    if (i === 0) {
      if (previousButton.className.split(" ").indexOf("disable") < 0) {
        previousButton.classList.add("disable");
      }
    } else if (previousButton.className.split(" ").indexOf("disable") >= 0) {
      previousButton.classList.remove("disable");
    }
    if (i === sectionButtons.length - 1) {
      if (nextButton.className.split(" ").indexOf("disable") < 0) {
        nextButton.classList.add("disable");
      }
    } else if (nextButton.className.split(" ").indexOf("disable") >= 0) {
      nextButton.classList.remove("disable");
    }
  });
}

nextBtn.addEventListener("click", function() {
  if (currentSection < sectionButtons.length - 1) {
    sectionButtons[currentSection + 1].click();
  }
});

prevBtn.addEventListener("click", function() {
  if (currentSection > 0) {
    sectionButtons[currentSection - 1].click();
  }
});

@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

body {
  font-family: 'Balsamiq sans', cursive;
  background-color: black;
  color: #00aa00;
}

html {
  /* Variables */
  --width-contcon: 50%;
  --width-bottomBar: 80%;
  --height-bottomBar: 26px;
  --bbcc-spacing: 5%;
}

.content-container {
  overflow: hidden;
  position: relative;
  border-left-width: 4px;
  border-left-style: solid;
  border-right-width: 4px;
  border-right-style: solid;
  border-image: radial-gradient(#dddddd, #00000000) 40;
  width: var(--width-contcon);
  height: 98vh;
  left: calc((100% - var(--width-contcon)) / 2);
}
.container {
  position: inherit;
  margin: 0 auto;
  border: 1px white solid;
}

.pNoBr {
  display: inline;
}
.bottomBar {
  padding: 6px;
  position: relative;
  border: 1px #ffffff solid;
  width: var(--width-bottomBar);
  top: calc((100% - var(--height-bottomBar)) / 1.16);
  left: calc((100% - var(--width-bottomBar)) / 2);
}
.pageControls {
  position: relative;
  left: calc(var(--width-bottomBar) / 2);
}

When I clicked the buttons, nothing happened at all.

Solution

You have a bunch of errors in your code starting from absence of the jquery reference; usages of functions and variables declared within anonymous function outside of it; usages of undefined variables and more.

First think I would suggest is Developer Tools and Console specifically. It's a tool that shows all the errors and warnings related to the page, and it is available on all the major browsers. Using it you can step-by-step find and fix issues you have.

Sample

Since there a lot of errors and there's no easy fix for them, it's much easier to implement simple solution from scratch. So here is the sample with your HTML and CSS, but mine JS: https://jsfiddle.net/hxza8p6r/26/

I've made few changes to the HTML page:

I've added jQuery reference;
I've added data-page attributes to the section elements with page numbers. It is much safer approach then using element ID, since ID should be unique on the page and could interfere with some other parts of the page.