Load multi-step form js plugin with Handlebars js in a cshtml

I am trying to load a multi-step js plugin which allows for animation across tabs on a form. Here is reference to how it should be loaded. Multi Step Plugin.

In my layout file I am loading handlebars script. It loads fine.

<script defer src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>

In my chstml review here is how I am loading the js plugin and my external js file

    <script defer src="/theme/assets/vendor/hs-step-form/dist/hs-step-form.min.js"></script>
    <script defer src="@StaticCdnUrl/lib/js/review.min.js?v=@AppSettings.VersionNumber"></script>

In my external js file here is how I am initializing the plugin (Same as the reference link)

    $(document).ready(async function () {


// INITIALIZATION OF STEP FORM
// =======================================================
new HSStepForm('.js-step-form', {
    finish($el) {
        const $successMessageTempalte = $el.querySelector('.js-success-message').cloneNode(true)

        $successMessageTempalte.style.display = 'block'

        $el.style.display = 'none'
        $el.parentElement.appendChild($successMessageTempalte)
    }
})
});

My Cshtml

My external js file

I am not getting any errors in the browser the plugin just does not seem to work. Also all files are being loaded ok.