js multistep onboarding fail b/c CSRF token

I purchased a well known nice admin UI for an app i’m building in Rails so that I can focus on building instead of UI which is not my strong suit. This app requires multistage onboarding. What I discovered is that everything is being thrown off by the CSRF token Rails inserts into forms, a hidden input tag and it just feels insane. While I am competent in many programming languages I have had bubonic avoidance for js. The UI team has decided I should disable CSRF for registration which seems stupid to me.

the CSRF token looks something like this:

<input type="hidden" name="authenticity_token" value="LilF6KgbBR7MBSruMcWFKyMOz_pnmcGzmiyxAm2aVDIvurHbA_uxcOqVNfB4NZbKPc7KzDoD8MGWpJAh7ErcDQ" autocomplete="off" />

The steps are wrapped by the form that roughly looks like the below and the js refreshes the UI to cycle through onboarding stages the view is roughly like this, trying my best to abbreviate it, mixing html and erb because this is a js issues:

<form class="my-auto pb-5" novalidate="novalidate" id="kt_create_account_form">
     <input type="hidden" name="authenticity_token" value="LilF6KgbBR7MBSruMcWFKyMOz_pnmcGzmiyxAm2aVDIvurHbA_uxcOqVNfB4NZbKPc7KzDoD8MGWpJAh7ErcDQ" autocomplete="off" />
     <%= render "reg_step1" %>
     <%= render "reg_step2" %>
     <%= render "reg_step3" %>
     <%= render "reg_step4" %>
     <%= render "reg_step5" %>
     <%= render "registration_actions" %>
</form>

The partials are basically divs wrapping the onboarding steps with a class marking the content for each step. That are queried by js in the following way:

var el = parent.querySelectorAll('[data-stepper-element="content"]');

and then the UI is refreshed based on the step.

I had hoped that I could filter out the one input tag so that it doesn’t break the the multistage registration, because even when I test this as just pure html and js, that one input tag messes everything up.

I tried to do the following:

[...parent.querySelectorAll(query)]
                    .filter(function(element) {
                        return element.name !== 'authenticity_token' && element.type !== 'hidden';
                    });

to no avail. Is there anything obvious from this so far? How on earth is this one CSRF input tag which is before the queries divs wreaking complete havoc like this? Help would be greatly appreciated.