Intro.js how to select multiple element, navigate between pages with continuous steps?

Question

I am currently using Intro.js for my website and the code works is here

Page 1:

    function startIntro(){
            var intro = introJs();
    
    intro.setOptions({
            steps: [
                {
                element: "#id_supplier",
                //   intro: "This is a dropdown",
                intro:'User click apply <hr><p><b>The tutorial video as shown below:<b></p><iframe class="abcd" src="https://www.youtube.com/embed/EU7PRmCpx-0" frameborder="0" ></iframe>',

            },
            {
                element: ".panel-group",
                intro: "Hello world!",
            },
            {
                element: ".panel-group",
                intro: 'More features, more <span style="color: red;">f</span><span style="color: green;">u</span><span style="color: blue;">n</span>.',
                position: 'left'
            },
            {
                element: '#step4',
                intro: "<span style='font-family: Tahoma'>Another step with new font!</span>",
                position: 'bottom'
            },
            {
                element: '#step5',
                intro: '<strong>Get</strong> it, <strong>use</strong> it.'
            }
        ]
});

intro.onchange(function(element) {
     if (this._currentStep === 0) {

     $("#id_supplier")[0].selectedIndex = 1;
         $("#id_supplier").trigger('change');
     }
     else{
        window.location.href= "/index?multipage=true";
     }
});
        intro.start();
};

$('#info').click(function () {
        startIntro();
})

Page 2:

 if (RegExp('multipage', 'gi').test(window.location.search)) {

        var intro = introJs();

        intro.setOptions({
            steps: [
                {
                    intro:'User click apply <hr><p><b>The tutorial video as shown below:<b></p><iframe class="abcd" src="https://www.youtube.com/embed/EU7PRmCpx-0" frameborder="0" ></iframe>',

                },
                {
                    element: "#create",
                    intro: "Hello world!",
                },
                {
                    element: ".panel-group",
                    intro: 'More features, more <span style="color: red;">f</span><span style="color: green;">u</span><span style="color: blue;">n</span>.',
                    position: 'left'
                }            
            ]
        });

        intro.start();
    }

How can I make it to select multiple elements? E.g. select the same class name.

When go to next page, how can I return back to previous page and the step is continuing from previous page? E.g. Page 1 - Step 1 - Step 3, when redirect to Page 2 then the step will start from 4.