How to customizer jquery step

Question

Am creating a step wizard using jquery-step library but I have failed to customize it. How can I customize it to replace the previous and next buttons when the user slides to the 3 step of "confirm in details" with yes or no buttons. This is the link to the jsfiddle with the work:

https://jsfiddle.net/Sunesis/xsd9ozrf/8/

$(function () {
    $('#wizard').steps({
        headerTag:"h2",
        bodyTag: "fieldset",
        transitionEffect: "slideLeft",
        onStepChanging: function (event, currentIndex, newIndex) {



            if ( newIndex === 1 ) {
                console.log('Verification Code')
            }
            if ( newIndex === 2 ) {
                console.log('Confirm details')
            }

            if(newIndex === 3){

            }
            return true;
        },
        labels:{
            finish: "✓",
            next: "⇾",
            previous: "⇽"
        }
    });
});

Answer 1

JQuery is not use in html file please use jquery script same as below

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.min.js"></script>

i change your jsfiddle link https://jsfiddle.net/Sunesis/xsd9ozrf/6/

Answer 2

The easy way to do it would be use JQuery, you can access the button by $('a[href$="#previous"]'). To be able to use JQuery please add this link into your project <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>.

So try the code bellow, should work fine. In fiddle: https://jsfiddle.net/g1sxtLv0/3/

$(function () {
    $('#wizard').steps({
        headerTag:"h2",
        bodyTag: "fieldset",
        transitionEffect: "slideLeft",
        onStepChanging: function (event, currentIndex, newIndex) {

            if ( newIndex === 1 ) {
                console.log('Verification Code')
            }
            if ( newIndex === 2 ) {
                console.log('Confirm details')
                $('a[href$="#previous"]').html('No');
                $('a[href$="#next"]').html('Yes');
            }

            if(newIndex === 3){
              $('a[href$="#previous"]').html('⇽');
              $('a[href$="#next"]').html('⇾');
            }
            return true;
        },
        labels:{
            finish: "✓",
            next: "⇾",
            previous: "⇽"
        }
    });
});