JetEngine Form Steps Tabs with pages title

<ul class="tab-steps--list"></ul>
<script>
jQuery(document).ready(function() {
    let isDragging = false;
    const tabStepsList = jQuery('.tab-steps--list');

    function startDrag() {
        isDragging = true;
        tabStepsList.addClass('dragg');
    }

    function stopDrag() {
        isDragging = false;
        tabStepsList.removeClass('dragg');
    }

    function drag(e) {
        if (!isDragging) return;
        tabStepsList.scrollLeft(tabStepsList.scrollLeft() - e.originalEvent.movementX);
    }

    tabStepsList.mousedown(startDrag);
    jQuery(document).mouseup(stopDrag);
    jQuery(document).mousemove(drag);

function scrollTabStepsList() {
    const tabStepsWidth = tabStepsList.width();
    const tabStepsListWidth = tabStepsList[0].scrollWidth;

    if (tabStepsListWidth > tabStepsWidth) {
        const activeStep = jQuery('.tab-steps--list li.active');

        if (activeStep.length > 0) {
            const activeStepOffset = activeStep.offset().left - tabStepsList.offset().left + 25;

            if (activeStepOffset < 0) {
                // Scroll to show the active step plus one additional step
                tabStepsList.scrollLeft(tabStepsList.scrollLeft() + activeStepOffset);
            } else {
                // Scroll to show the active step and the next step
                const nextStep = activeStep.next();
                const nextStepOffset = nextStep.offset().left - tabStepsList.offset().left - tabStepsWidth + nextStep.width() + 25;
                tabStepsList.scrollLeft(tabStepsList.scrollLeft() + nextStepOffset);
            }
        }
    }
}





    // Create li elements and append them to the ul
    const jetFormPages = jQuery('.jet-form-page');
    for (let i = 0; i < jetFormPages.length; i++) {
        const stepNumber = i + 1;
        const liElement = jQuery('<li>').attr('data-step', stepNumber);

        // Get the page title from the first row
        const pageTitle = jetFormPages.eq(i).find('.jet-form__heading > span').text().trim();
        liElement.text(pageTitle);

        if (i === 0) {
            liElement.addClass('active');
        }

        tabStepsList.append(liElement);
    }
    
function updateTabClasses(step, currentPage) {
    const tabListItem = jQuery(".tab-steps--list li[data-step=" + step + "]");
    const prevPage = parseInt(step) - 1;

    jQuery('.tab-steps--list li').removeClass('active prev');

    if (currentPage < step) {
        tabListItem.addClass('active');
        tabListItem.prevAll().addClass("prev");
    } else {
        tabListItem.addClass('active');
        tabListItem.prevAll().addClass("prev");
        tabListItem.nextAll().removeClass("active prev");
    }
}

jQuery('.tab-steps--list li').click(function() {
    const dataStep = jQuery(this).attr('data-step');
    const currentPage = jQuery("form.jet-form").find(".jet-form-page:not(.jet-form-page--hidden)").attr("data-page");

    jQuery(".jet-form-page").addClass("jet-form-page--hidden");
    jQuery(".jet-form-page[data-page=" + dataStep + "]").removeClass("jet-form-page--hidden");

    updateTabClasses(dataStep, currentPage);
    scrollTabStepsList();
});

jQuery('button.jet-form__next-page').click(function() {
    const pageNumber = jQuery("form.jet-form").find(".jet-form-page:not(.jet-form-page--hidden)").attr("data-page");
    const currentPage = parseInt(pageNumber) + 1;

    jQuery(".tab-steps--list li[data-step=" + pageNumber + "]").removeClass("active").addClass("prev");
    jQuery(".tab-steps--list li[data-step=" + currentPage + "]").addClass("active");

    updateTabClasses(currentPage, currentPage);
    scrollTabStepsList();
});

jQuery('button.jet-form__prev-page').click(function() {
    const pageNumber = jQuery("form.jet-form").find(".jet-form-page:not(.jet-form-page--hidden)").attr("data-page");
    const backPage = parseInt(pageNumber) - 1;

    jQuery(".tab-steps--list li[data-step=" + pageNumber + "]").removeClass("active prev");
    jQuery(".tab-steps--list li[data-step=" + backPage + "]").addClass("active");

    updateTabClasses(backPage, backPage);
    scrollTabStepsList();
});


});


 
</script>
<style>
ul.tab-steps--list {
  list-style: none;
  width: 100%;
  text-align: center;
  padding: 0 0 10px;
  display: flex;
  overflow-x: scroll;
  cursor: grab;
}
ul.tab-steps--list.grabbing {
    cursor: grabbing;
}
.tab-steps--list li {
  position: relative;
  list-style: none;
  display: inline-block;
  width: auto;
  cursor: pointer;
  opacity: 0.5;
  white-space: nowrap;
  padding: 5px 10px;
  border: 1px solid #777;
  counter-increment: li;
}

.tab-steps--list li.active {
  opacity: 1;
}
.tab-steps--list li.active, .tab-steps--list li.prev {
  color: white;
  background: var(--e-global-color-primary)
}
.tab-steps--list li:before {
  content: counter(li)". ";
}
.tab-steps--list li:not(:last-child):after {
    content:"\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-left: 10px;
}
</style>