diff --git a/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly b/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly
index f349bfc8..db430bc3 100644
--- a/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly
+++ b/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly
@@ -19,24 +19,21 @@
     <script src="${rootURL}/plugin/build-pipeline-plugin/js/jquery.tooltip.min.js"></script>
     <script src="${rootURL}/plugin/build-pipeline-plugin/js/build-pipeline.js"></script>
 
-<script id="build-card-template" type="text/x-handlebars-template">
+<span id="build-card-template" style="display: none">
     <st:include page="buildCardTemplate.jelly"
                 from="${from.getBuildCard()}"
                 it="${from}"/>
-</script>
+</span>
 
-<script id="project-card-template" type="text/x-handlebars-template">
+<span id="project-card-template" style="display: none">
     <st:include page="projectCardTemplate.jelly"
                 from="${from.getColumnHeaders()}"
                 it="${from}" />
-</script>
+</span>
 
     <st:bind var="buildPipelineViewProxy" value="${from}" />
-    <script type="text/javascript">
-        var buildCardTemplateSource = jQuery("#build-card-template").html();
-        var projectCardTemplateSource = jQuery("#project-card-template").html();
-        var buildPipeline = new BuildPipeline(buildPipelineViewProxy, Handlebars.compile(buildCardTemplateSource), Handlebars.compile(projectCardTemplateSource), ${from.getRefreshFrequencyInMillis()});
-    </script>
+    <span class="pipeline-refresh-frequency" data-refresh-frequency="${from.getRefreshFrequencyInMillis()}" style="display: none"/>
+    <st:adjunct includes="au.com.centrumsystems.hudson.plugin.buildpipeline.BuildPipelineView.build-pipeline-init"/>
 
     <st:include page="buildCardHelpers.jelly"
                 from="${from.getBuildCard()}"
@@ -131,29 +128,17 @@
                                 <j:forEach begin="${0}" end="${buildPipelineForm.getGridWidth() - 1}" indexVar="y">
                                     <j:set var="build" type="au.com.centrumsystems.hudson.plugin.buildpipeline.BuildForm" value="${buildGrid.get(x,y)}" />
                                     <j:if test="${build != null}">
-                                        <td id="build-${build.getId()}"></td>
-                                        <script>
-                                            // generate build-card
-                                            var buildData = ${build.asJSON()};
-                                            jQuery("#build-${build.getId()}").append(buildPipeline.buildCardTemplate(buildData));
-                                            // add build proxy to proxies for future use
-                                            buildPipeline.buildProxies[${build.getId()}] = <st:bind value="${build}" />;
-                                            <j:if test="${build.getStatus() == 'BUILDING'}">
-                                                buildPipeline.showProgress(${build.getId()}, ${build.getDependencyIds()});
-                                            </j:if>
-                                            <j:if test="${build.getStatus() == 'PENDING'}">
-                                                jQuery("#pipelines").bind("show-status-${build.getId()}", function() {
-                                                <j:choose>
-                                                    <j:when test="${build.isManualTrigger()}">
-                                                        buildPipeline.updateBuildCard(${build.getId()});
-                                                    </j:when>
-                                                    <j:otherwise>
-                                                        buildPipeline.updateNextBuildAndShowProgress(${build.getId()}, ${build.getNextBuildNumber()}, ${build.getDependencyIds()});
-                                                    </j:otherwise>
-                                                </j:choose>
-                                                });
-                                            </j:if>
-                                        </script>
+                                        <td id="build-${build.getId()}">
+                                            <j:set var="buildDataJson" value="${build.asJSON()}" />
+                                            <span class="build-data"
+                                                 data-build-id="${build.getId()}"
+                                                 data-build-info="${buildDataJson}"
+                                                 data-build-status="${build.getStatus()}"
+                                                 data-is-manual-trigger="${build.isManualTrigger()}"
+                                                 data-next-build-number="${build.getNextBuildNumber()}"
+                                                 data-dependency-ids="${build.getDependencyIds()}"/>
+                                            <st:bind var="buildProxy_${build.getId()}" value="${build}" />
+                                        </td>
                                         <j:if test="${(y + 1 != buildPipelineForm.getGridWidth())}">
                                             <!-- Changing length to size() to get rid of arrows when there are no more child jobs.-->
                                         <td class="next">
diff --git a/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/build-pipeline-init.js b/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/build-pipeline-init.js
new file mode 100644
index 00000000..e00f2cee
--- /dev/null
+++ b/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/build-pipeline-init.js
@@ -0,0 +1,47 @@
+const buildCardTemplateSource = jQuery("#build-card-template").html();
+const projectCardTemplateSource = jQuery("#project-card-template").html();
+const refreshFrequency = parseInt(document.querySelector(".pipeline-refresh-frequency").dataset.refreshFrequency);
+
+var buildPipeline = new BuildPipeline(
+    buildPipelineViewProxy,
+    Handlebars.compile(buildCardTemplateSource),
+    Handlebars.compile(projectCardTemplateSource),
+    refreshFrequency
+);
+
+
+function initializeBuildCards() {
+    document.querySelectorAll('.build-data').forEach(buildElement => {
+
+        const buildId = buildElement.dataset.buildId;
+        const buildData = JSON.parse(buildElement.dataset.buildInfo);
+        const buildStatus = buildElement.dataset.buildStatus;
+        const isManualTrigger = buildElement.dataset.isManualTrigger === 'true';
+        const nextBuildNumber = parseInt(buildElement.dataset.nextBuildNumber, 10);
+        const dependencyIds = JSON.parse(buildElement.dataset.dependencyIds);
+
+        // Generate build card
+        jQuery(buildElement).append(buildPipeline.buildCardTemplate(buildData));
+
+        // add build proxy to proxies for future use-->
+        buildPipeline.buildProxies[buildId] = window[`buildProxy_${buildId}`];
+
+        if (buildStatus === 'BUILDING') {
+            buildPipeline.showProgress(buildId, dependencyIds);
+        }
+
+        jQuery("table.pipelines").on(`show-status-${buildId}`, function () {
+            if (isManualTrigger) {
+                buildPipeline.updateBuildCard(buildId);
+            } else {
+                buildPipeline.updateNextBuildAndShowProgress(
+                    buildId,
+                    nextBuildNumber,
+                    dependencyIds
+                );
+            }
+        });
+    });
+}
+
+document.addEventListener('DOMContentLoaded', initializeBuildCards);