How to create tab buttons that links to its respective tab when creating a form in HTML

I am creating a form in HTML that will have multiple tabs. I have a previous and next button to go through all the tabs as if they were pages. I also have circles at the bottom of the tab to inform the user what tab they are actively on and which tabs are next and which tabs were before. I would like each tab to be a link that when the user clicks on it will link them to it's respective tab. For example if I click on the tab circle labeled A it will bring me to the A tab. I tried using and internal link with anchor tags but that did not seem to work. Any idea? Thank you.

<style>
        /* Style for Select */


        /* Style the form */
        #regForm {
          background-color: #e9e9e9;
          margin: 20px auto;
          width: 70%;
          min-width: 300px;
        }



        /* Make circles that indicate the steps of the form: */
        .step {
          height: 15px;
          width: 15px;
          margin: 0 2px;
          background-color: #b8cce4;
          border: none;
          border-radius: 50%;
          display: inline-block;
          opacity: 0.5;
        }

        /* Mark the active step: */
        .step.active {
          opacity: 1;
        }

        /* Mark the steps that are finished and valid: */
        .step.finish {
          background-color: #b8cce4;
        }

        /*Used for blue background headings */
        tr.blueHead {
          background-color: #b8cce4;
        }
    </style>

  <div id="regForm">
  <div class="tab">
    <h1>Tab A</h1>
  </div>

  <div class="tab">
  <h1>Tab B</h1>
  </div>

  <div style="float:right;">
    <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
    <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button></div>
  </div>

  <div style="text-align:center;margin-top:40px;">
    <span class="step">A</span>
    <span class="step">B</span>
  </div>

  <script>
  //Form Tabs
  var currentTab = 0; // Current tab is set to be the first tab (0)
  showTab(currentTab); // Display the current tab

  function showTab(n) {
    // This function will display the specified tab of the form ...
    var x = document.getElementsByClassName("tab");
    x[n].style.display = "block";

    // ... and fix the Previous/Next buttons:
  /*  if (n == 0) {
      document.getElementById("prevBtn").style.display = "none";
    } else {
      document.getElementById("prevBtn").style.display = "inline";
    }
    if (n == (x.length - 1)) {
      document.getElementById("nextBtn").innerHTML = "Submit";
    } else {
      document.getElementById("nextBtn").innerHTML = "Next";
    }*/
    // ... and run a function that displays the correct step indicator:

    //Form 1 displays only Next button, Previous button is disabled.
    if (n == 0) {
       document.getElementById("prevBtn").style.display = "none";
     } else {
       document.getElementById("prevBtn").style.display = "inline";
     }
     //Form 5 displays only Previous button, Next button is disabled.
     if (n == 1) {
        document.getElementById("nextBtn").style.display = "none";
      } else {
        document.getElementById("nextBtn").style.display = "inline";
      }
    fixStepIndicator(n)
      }

  function nextPrev(n) {
    // This function will figure out which tab to display
    var x = document.getElementsByClassName("tab");
    // Exit the function if any field in the current tab is invalid:
    if (n == 1 && !validateForm()) return false;
    // Hide the current tab:
    x[currentTab].style.display = "none";
    // Increase or decrease the current tab by 1:
    currentTab = currentTab + n;
    // if you have reached the end of the form... :
    if (currentTab >= x.length) {
      //...the form gets submitted:
      document.getElementById("regForm").submit();
      return false;
    }
    // Otherwise, display the correct tab:
    showTab(currentTab);
  }

  function validateForm() {
    // This function deals with validation of the form fields
    var x, y, i, valid = true;
    x = document.getElementsByClassName("tab");
    y = x[currentTab].getElementsByTagName("input");
    // A loop that checks every input field in the current tab:
    for (i = 0; i < y.length; i++) {
      // If a field is empty...
      if (y[i].value == "") {
        // add an "invalid" class to the field:
        y[i].className += " invalid";
        // and set the current valid status to false:
        valid = false;
      }
    }
    // If the valid status is true, mark the step as finished and valid:
    if (valid) {
      document.getElementsByClassName("step")[currentTab].className += " finish";
    }
    return valid; // return the valid status
  }

  function fixStepIndicator(n) {
    // This function removes the "active" class of all steps...
    var i, x = document.getElementsByClassName("step");
    for (i = 0; i < x.length; i++) {
      x[i].className = x[i].className.replace(" active", "");
    }
    //... and adds the "active" class to the current step:
    x[n].className += " active";
  }

  </script>