Unable to set the counter when clicking on the current button

I have 5 steps with Previous, Current & Next buttons and counter below it. I am able to move forward and backward with the help of Previous, Current & Next buttons. But, I am facing problem in the counter. I am considering Step-3 is current step. When I am clicking on Current button, I am able to come back to step-3 but the counter is not coming to 3 instead it is taking the last step number. Please check the code and help me with the issue.

var current = 1,
          current_step, next_step, steps;
        steps = $("fieldset").length;
        var fieldset_count = steps.current;
        if (current == '1') {
          // $('#first-step a').add('disabled');
          $('#first-step a.previous').prop('disabled', true);
        };
        if ($('fieldset').hasClass('last-step')) {
          $('#last-step a.next').prop('disabled', true);
        }


        $(".next").on("click", function () {
          current_step = $(this).parent("fieldset");
          next_step = $(this).parent("fieldset").next();
          next_step.show();
          current_step.hide();
          $('.counter-step').html(function (i, val) {
            return val * 1 + 1
          });

        });

        $(".previous").on("click", function () {
          current_step = $(this).parent("fieldset");
          next_step = $(this).parent("fieldset").prev();
          next_step.show();
          current_step.hide();
          $('.counter-step').html(function (i, val) {
            return val * 1 - 1
          });
        });

        // Current button functionality
        $(".current").on("click",function(){
          current_step = $(this).parent("fieldset");
          next_step = $("#current-step");
          next_step.show();
          current_step.hide();
          var current_counter = $(this).parent("fieldset").attr('value');
          $('.counter-step').text(current_counter);
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
    integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

  <link rel="stylesheet" href="/css/icofont/icofont.min.css">

</head>
<style>
  .container fieldset:not(:first-of-type) {
    display: none;
  }
</style>


<body>

  <div class="container">
    <fieldset id="first-step" value="1">
      <h4 class="mb-3 header">Step-1</h4>
      <a type="button" name="previous" class="previous btn btn-secondary" value="Previous">Previous</a>
      <a type="button" name="current" class="current btn btn-success" value="Current">Current</a>
      <a type="button" name="next" class="next btn btn-primary" value="Next">Next</a>
    </fieldset>
    <fieldset value="2">
      <h4 class="mb-3 header">Step-2</h4>
      <a type="button" name="previous" class="previous btn btn-secondary" value="Previous">Previous</a>
      <a type="button" name="current" class="current btn btn-success" value="Current">Current</a>
      <a type="button" name="next" class="next btn btn-primary" value="Next">Next</a>
    </fieldset>
    <fieldset value="3" id="current-step">
      <h4 class="mb-3 header">Step-3</h4>
      <a type="button" name="previous" class="previous btn btn-secondary" value="Previous">Previous</a>
      <a type="button" name="current" class="current btn btn-success" value="Current">Current</a>
      <a type="button" name="next" class="next btn btn-primary" value="Next">Next</a>
    </fieldset>
    <fieldset value="4" >
      <h4 class="mb-3 header">Step-4</h4>
      <a type="button" name="previous" class="previous btn btn-secondary" value="Previous">Previous</a>
      <a type="button" name="current" class="current btn btn-success" value="Current">Current</a>
      <a type="button" name="next" class="next btn btn-primary" value="Next">Next</a>
    </fieldset>
    <fieldset class="last-step" id="last-step" value="4">
      <h4 class="mb-3 header">Step-5</h4>
      <a type="button" name="previous" class="previous btn btn-secondary" value="Previous">Previous</a>
      <a type="button" name="current" class="current btn btn-success" value="Current">Current</a>
      <a type="button" name="next" class="next btn btn-primary" value="Next">Next</a>
    </fieldset>
    <p>Viewing Step <span class="counter-step">1</span> of <span class="final-step">23</span></p>
  </div>






    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
      integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
      integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous">
    </script>

</body>

</html>

Answer

The current button you are clicking is within the active fieldset that you are currently on, NOT the value=’3′ fieldset. The ‘this’ context for the button that is being clicked is pulling the parent of the fieldset that is visible before being hidden, not the fieldset that shows afterwards.

Try passing next_step.attr('value') instead of $(this).parent("fieldset").attr('value')