INTRO JS

https://introjs.com/example/hello-world/index.html

Wizard steps are managed with simple HTML attributes

data-step=”1″ data-intro=”This is a tooltip for wizard step 1!”
data-step=”2″ data-intro=”This is the second tooltip for wizard step 2!”
data-step=”3″ data-intro=”This is the third tooltip for wizard step 3!”

The below script needs to be added to

$(document).on('click', '#wizard', function(e) {
    e.preventDefault();
    introJs().start();
});

In the Ajax submits you will see a variable. formdata
The below snippet is what you must append to the top of your Ajax call to initiate the variable
Otherwise you need to change the variable to what ever you are targeting.

var formdata = new FormData;
formdata.append("commId", $("#template-id").val());

    $("#product-form").on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'strategy/create-product',
            data: new FormData(this),
            contentType: false,
            dataType: 'json',
            cache: false,
            processData: false,
            success: function(response) {
                if (response.success) {
                    location.href = "product/index"
                } else {
                    PNotify.error({
                        title: 'Error Saving Product',
                        text: response.message,
                        mode: 'light'
                    });
                }
            }
        });
    });

        $.ajax({
            type: 'POST',
            url: 'products/save-email-template',
            dataType: 'json',
            data: formdata,
            processData: false,
            cache: false,
            contentType: false,
            success: function (response) {
                if (response.success) {
                    PNotify.success({
                        title: 'Success!',
                        text: response.message,
                        styling: 'material',
                        mode: 'light',
                        maxTextHeight: null,
                        delay: 2000,
                        destroy: true,
                        closer: true,
                        sticker: false
                    });
                    setTimeout(() => {
                        location.reload();
                    }, 500);
                } else {
                    PNotify.error({
                        title: 'Error!',
                        text: response.message,
                        styling: 'material',
                        mode: 'light',
                        maxTextHeight: null,
                        delay: 2000,
                        destroy: true,
                        closer: true,
                        sticker: false
                    });
                }
            }
        });

If you get locked out of your website with this plugin you can clean your table for this plugin to reset it so you can reconfigure it with the below query.

SELECT * FROM wp_options WHERE option_name="aio_wp_security_configs"