Simple full page multi-step form. (Minus the form) using jQuery

Question

I've tried my hand at creating a simple multistep system for a form. I used this CodePen as a base. I'm not too Jquery savvy so I'm thinking there could be smarter ways to accomplish what I have done, but I think for its use case it's rather lightweight.

Could the code be simpler? If so how? My original Fiddle

$(document).ready(function(e) {

  // get number of steps
  const numberPanels = $('.ms-panel').length;

  // console.log('Total Panels - ' + numberPanels);

  var clicked = null;

  function panelNavigator() {
    // determine position and store for use
    let currentIndex = Number($('.ms-panel-current').attr('data-panel'));

    // console.log('Current Panel - ' + currentIndex);

    // percentage increase
    // const percentage = (currentIndex * 100) / numberPanels;
    // $('.progress-inner').width(percentage + '%');
    // percentage decrease
    // const percentage = ((currentIndex - 1) * 100) / numberPanels + 1;
    // $('.progress-inner').width(percentage + '%');

    if (clicked == 'true') {
      // move to next panel
      $('.ms-panel-current').hide();
      $('.ms-panel-current').removeClass('ms-panel-current');
      $('.ms-panel-step-' + (currentIndex + 1)).show().addClass('ms-panel-current');
      // console.log(".ms-next Click");
    } else if (clicked == 'false') {
      // move back a panel
      $('.ms-panel-current').hide();
      $('.ms-panel-current').removeClass('ms-panel-current');
      $('.ms-panel-step-' + (currentIndex - 1)).show().addClass('ms-panel-current');
      // console.log(".ms-back Click");
    }

    // set current panel position
    currentIndex = Number($('.ms-panel-current').attr('data-panel'));

    // not starting panel? show back button
    if (currentIndex > 1) {
      $('.ms-back').removeClass('ms-btn-d-none');
    }

    // is starting panel? remove back button
    if (currentIndex == 1) {
      $('.ms-back').addClass('ms-btn-d-none');
    } else if ($('.ms-next').hasClass('ms-btn-d-none')) {
      $('.ms-next').removeClass('ms-btn-d-none');
    }

    // is last panel? remove next button
    if (currentIndex + 1 == numberPanels + 1) {
      $('.ms-next').addClass('ms-btn-d-none');
    }

  }

  // next panel button
  $('.ms-next').click(function(e) {
    clicked = 'true';
    panelNavigator();
  });

  // back panel button
  $('.ms-back').click(function(e) {
    clicked = 'false';
    panelNavigator();
  });

  panelNavigator();

});

// To-do. Restrict panel movement if no input detected.

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

a {
  display: block;
  padding: 0.3em 0.5em;
  background-color: #ccc;
  border-radius: 3.33px;
  color: #1c1c1c;
  transition: ease all 0.3s;
  margin-right: 0.3em;
  text-decoration: none;
}

a:hover {
  background-color: #1c1c1c;
  color: #ccc;
  transition: ease all 0.3s;
}

a:last-child {
  margin-right: 0;
}

.btn-wrap {
  text-align: center;
  width: 20%;
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  margin-top: -70px;
}

h1 {
  display: block;
  margin: 0 auto;
  text-align: center;
}

/* ms-css */

.ms-panel-group {
  position: relative;
}

.ms-panel {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f0f;
}

.ms-panel:not(.ms-panel-current) {
  visibility: hidden;
  opacity: 0;
  display: none;
}

.ms-btn-d-none {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ms-panel-group">
  <div class="ms-panel ms-panel-step-1 ms-panel-current" data-panel="1">
    <h1>
      Testing One
    </h1>
  </div>
  <div class="ms-panel ms-panel-step-2" data-panel="2">
    <h1>
      Testing Two
    </h1>
  </div>
  <div class="ms-panel ms-panel-step-3" data-panel="3">
    <h1>
      Testing Three
    </h1>
  </div>
  <div class="ms-panel ms-panel-step-4" data-panel="4">
    <h1>
      Testing Four
    </h1>
  </div>
  <div class="ms-panel ms-panel-step-5" data-panel="5">
    <h1>
      Testing Five
    </h1>
  </div>

  <div class="btn-wrap">
    <a href="javascript:;" class="ms-btn ms-back">Back</a>
    <a href="javascript:;" class="ms-btn ms-next">Next</a>
  </div>

</div>