Jobs JS order of operation

The jobs client side javascript is very particular about load order

src/components/ApplyHeader.jsx

+import { memo } from "react";
+import { useEffect } from "react";
+
+// The jobs client side javascript is very particular about load order
+export const ApplyHeader = memo(function ApplyHeader() {
+  useEffect(() => {
+    const jquery = document.createElement("script");
+    jquery.async = false;
+    jquery.src = "https://code.jquery.com/jquery-1.12.4.min.js";
+    document.body.appendChild(jquery);
+
+    const bootstrap = document.createElement("script");
+    bootstrap.async = false;
+    bootstrap.src =
+      "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js";
+    document.body.appendChild(bootstrap);
+
+    const jobsPreloader = document.createElement("script");
+    jobsPreloader.dataset.lumesseApply = true;
+    jobsPreloader.dataset.lumesseApplyConfigKey =
+      "AAAC8QAA-1d049852-a5bd-42da-bd30-ebe6eec9b143";
+    jobsPreloader.dataset.lumesseApplyHost =
+      "https://emea3.recruitmentplatform.com";
+    jobsPreloader.dataset.lumesseApplyErrorsPlacement = "bottom";
+    jobsPreloader.dataset.lumesseApplyDescriptionPlacement = "bottom";
+    jobsPreloader.dataset.lumesseApplyMenuPlacement = "left";
+    jobsPreloader.async = false;
+    jobsPreloader.src =
+      "https://emea3.recruitmentplatform.com/apply-app/static/apply/release/2-LATEST/apply-preloader-namespaced.js";
+    document.body.appendChild(jobsPreloader);
+
+    const jobsCustom = document.createElement("script");
+    jobsCustom.async = false;
+    jobsCustom.src = "/jobs/assets/custom.js";
+    document.body.appendChild(jobsCustom);
+
+    const jobsMain = document.createElement("script");
+    jobsMain.async = false;
+    jobsMain.src = "/jobs/assets/main.js";
+    document.body.appendChild(jobsMain);
+
+    return () => {
+      document.body.removeChild(jquery);
+      document.body.removeChild(bootstrap);
+      document.body.removeChild(jobsPreloader);
+      document.body.removeChild(jobsCustom);
+      document.body.removeChild(jobsMain);
+    };
+  }, []);
+  return <></>;
+});

src/components/apply/Apply.jsx

@@ -3,10 +3,12 @@ import { Link } from "react-router-dom";
 import { EmblBreadcrumbs } from "../EmblBreadcrumbs";
 import { EmblFooter } from "../EmblFooter";
 import { EmblHeader } from "../EmblHeader";
+import { ApplyHeader } from "../ApplyHeader";
 
 export function Apply() {
   return (
     <>
+      <ApplyHeader />
       <EmblHeader />
       <EmblBreadcrumbs />
       <section className="embl-grid embl-grid--has-centered-content">
@@ -31,17 +33,6 @@ export function Apply() {
             data-template="SelectDropDown"
             src={process.env.PUBLIC_URL + "/assets/_SelectDropDown.html"}
           ></script>
-          {/* Apply */}
-          <script
-            type="text/javascript"
-            src="https://emea3.recruitmentplatform.com/apply-app/static/apply/release/2-LATEST/apply-preloader-namespaced.js"
-            data-lumesse-apply
-            data-lumesse-apply-config-key="AAAC8QAA-1d049852-a5bd-42da-bd30-ebe6eec9b143"
-            data-lumesse-apply-host="https://emea3.recruitmentplatform.com"
-            data-lumesse-apply-errors-placement="bottom"
-            data-lumesse-apply-description-placement="bottom"
-            data-lumesse-apply-menu-placement="left"
-          ></script>
           {/* CTS Default / Branded Bootstrap  */}
           <link
             href="https://emea3.recruitmentplatform.com/apply-app/static/vanilla-silk/release/1-LATEST/css/cmp-bs.css"
@@ -68,33 +59,40 @@ export function Apply() {
             type="text/css"
             href={process.env.PUBLIC_URL + "/assets/custom.css"}
           />
-          <script
-            type="text/javascript"
-            src="https://code.jquery.com/jquery-1.12.3.min.js"
-          ></script>
 
           <script
             type="text/javascript"
             src="https://emea3.recruitmentplatform.com/apply-app/static/apply/release/2-LATEST/apply-application-form-namespaced.js"
           ></script>
 
-          <script
+          {/* <script
             type="text/javascript"
             src={process.env.PUBLIC_URL + "/assets/main.js"}
-          ></script>
-          <script
+          ></script> */}
+          {/* <script
             src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
             integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
             crossOrigin="anonymous"
-          ></script>
+          ></script> */}
           <script
             src={process.env.PUBLIC_URL + "/assets/talenstplace-alert.min.js"}
             type="text/javascript"
           ></script>
-          <script
+          {/* <script
             src={process.env.PUBLIC_URL + "/assets/custom.js"}
             type="text/javascript"
-          ></script>
+          ></script> */}
+          {/* Apply */}
+          {/* <script
+            type="text/javascript"
+            src="https://emea3.recruitmentplatform.com/apply-app/static/apply/release/2-LATEST/apply-preloader-namespaced.js"
+            data-lumesse-apply
+            data-lumesse-apply-config-key="AAAC8QAA-1d049852-a5bd-42da-bd30-ebe6eec9b143"
+            data-lumesse-apply-host="https://emea3.recruitmentplatform.com"
+            data-lumesse-apply-errors-placement="bottom"
+            data-lumesse-apply-description-placement="bottom"
+            data-lumesse-apply-menu-placement="left"
+          ></script> */}
         </Helmet>
         <div>{/* {/* empty */} </div>