Checkout radial progress bar event

Question

I've created the radial checkout progress bar wit h some animation and transition. Added the event on the button. But the issues is I have the different content for each step in the checkout. What is the best practice. Is it better use the data attr. for this. The content should hide and shown for certain checkout. codepen

    <div class="step-1" id="checkout-progress" data-current-step="1">
    <div class="progress-bar">
        <div class="step step-1 active " data-step="1"><span> 1</span>
            <div class="step-check">t</div>
            <div class="step-label"> address</div>
        </div>
        <div class="step step-2" data-step="2"><span> 2</span>
            <div class="step-check">a</div>
            <div class="step-label"> shipping</div>
        </div>
        <div class="step step-3" data-step="3"><span> 3</span>
            <div class="step-check">b</div>
            <div class="step-label"> payment</div>
        </div>
        <div class="step step-4" data-step="4"><span> 4</span>
            <div class="step-check">3</div>
            <div class="step-label"> summary</div>
        </div>
    </div>
</div>
<!-- <div class="button-container">
    <div class="btn btn-prev"> previous step</div>
    <div class="btn btn-next"> next step</div>
</div> -->


<div class="checkout-content" data-step="1">
    <h1>checkout content 1</h1>
    <div class="btn btn-next"> next step</div>
    <div class="btn btn-next"> next step</div>
</div>
<div class="checkout-content" data-step="2">
    <h1>checkout content 2</h1>
    <div class="btn btn-next"> next step</div>
    <div class="btn btn-next"> next step</div>
</div>
<div class="checkout-content" data-step="3">
    <h1>checkout content 3</h1>
    <div class="btn btn-next"> next step</div>
    <div class="btn btn-next"> next step</div>
</div>
<div class="checkout-content" data-step="4">
    <h1>checkout content 4</h1>
    <div class="btn btn-next"> next step</div>
    <div class="btn btn-next"> next step</div>
</div>


$('.btn-next').on('click', function() {

    var currentStepNum = $('#checkout-progress').data('current-step');
    var nextStepNum = (currentStepNum + 1);
    var currentStep = $('.step.step-' + currentStepNum);
    var nextStep = $('.step.step-' + nextStepNum);
    var progressBar = $('#checkout-progress');
    $('.btn-prev').removeClass('disabled');
    if(currentStepNum == 5) {
        return false;
    }
    if(nextStepNum == 5){
        $(this).addClass('disabled');
    }
    // $('.checkout-progress').removeClass('.step-' + currentStepNum).addClass('.step-' + (currentStepNum + 1));

    currentStep.removeClass('active').addClass('valid');
    currentStep.find('span').addClass('opaque');
    currentStep.find('.step-check').removeClass('opaque');

    nextStep.addClass('active');
    progressBar.removeAttr('class').addClass('step-' + nextStepNum).data('current-step', nextStepNum);
});


$('.btn-prev').on('click', function() {

    var currentStepNum = $('#checkout-progress').data('current-step');
    var prevStepNum = (currentStepNum - 1);
    var currentStep = $('.step.step-' + currentStepNum);
    var prevStep = $('.step.step-' + prevStepNum);
    var progressBar = $('#checkout-progress');
    $('.btn-next').removeClass('disabled');
    if(currentStepNum == 1) {
        return false;
    }
    if(prevStepNum == 1){
        $(this).addClass('disabled');
    }
    // $('.checkout-progress').removeClass('.step-' + currentStepNum).addClass('.step-' + (prevStepNum));

    currentStep.removeClass('active');
    prevStep.find('span').removeClass('opaque');
    prevStep.find('.step-check').addClass('opaque');

    prevStep.addClass('active').removeClass('valid');
    progressBar.removeAttr('class').addClass('step-' + prevStepNum).data('current-step', prevStepNum);
});

Answer 1

Why are you repeating Actions(next & pev) buttons in Contain section in every stage. Make it new section called .actions then you can place your actions buttons their... Then you can have data-target attribute which holds the value of stepNumber to which it need to go when it clicked...

And you need to change data-target attribute every time when it clicks to which you want user to move next... And also same with pev button...