Employer form mostly working with persist to db

app/javascript/controllers/add_alt_network_logo_controller.js

@@ -20,13 +20,18 @@ export default class extends Controller {
         const nextIndex = this.networkLogoTargets.length
         const num_of_colors = this.formColorValue.length
         let colorIndex = 0
+        let newSecondaryColor = "copper"
         if (nextIndex != 0) {
             colorIndex = nextIndex % num_of_colors
+            if (nextIndex % 2 == 1) {
+                newSecondaryColor = "bronze"
+            }
         }
         const newColor = this.formColorValue[colorIndex]
         return this.templateTarget.innerHTML
                             .replace(/NEW_RECORD/g, nextIndex)
                             .replace(/NEXT_COLOR/g, newColor)
+                            .replace(/NEXT_SECONDARY_COLOR/g, newSecondaryColor)
 
     }
-}
+}

app/javascript/controllers/add_network_exception_controller.js

@@ -1,20 +1,30 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-    static targets = ["template", "container"]
-
-    connect() {
-        console.log("connect")
+    static values = {
+        parentColor: String
     }
 
+    static targets = ["template", "container"]
+
     add(event) {
         console.log("start")
         event.preventDefault()
         event.stopPropagation()
 
-        const content = this.templateTarget.innerHTML.replace(/NEW_EXC_RECORD/g, new Date().getTime())
+        const content = this.#updateTemplateException()
 
         this.containerTarget.insertAdjacentHTML("beforeend", content)
-        console.log("end")
+
+    }
+
+    #updateTemplateException() {
+        const nextIndex = new Date().getTime()
+        console.log("~~ " + this.parentColorValue)
+        return this.templateTarget.innerHTML
+                            .replace(/NEW_EXC_RECORD/g, nextIndex)
+                            .replace(/PARENT_SECONDARY_COLOR/g, this.parentColorValue)
+
+
     }
 }

app/javascript/controllers/add_plan_controller.js

@@ -7,6 +7,7 @@ export default class extends Controller {
     static targets = ["template", "container", "plan", "button"]
 
     add(event) {
+        console.log("start")
         event.preventDefault()
         event.stopPropagation()
 
@@ -20,14 +21,19 @@ export default class extends Controller {
         const nextIndex = this.planTargets.length
         const num_of_colors = this.formColorValue.length
         let colorIndex = 0
+        let newSecondaryColor = "copper"
         if (nextIndex != 0) {
             colorIndex = nextIndex % num_of_colors
+            if (nextIndex % 2 == 1) {
+                newSecondaryColor = "bronze"
+            }
         }
         const newColor = this.formColorValue[colorIndex]
         return this.templateTarget.innerHTML
                             .replace(/NEW_RECORD/g, nextIndex)
                             .replace(/NEW_PLAN/g, nextIndex + 1)
                             .replace(/NEXT_COLOR/g, newColor)
+                            .replace(/NEXT_SECONDARY_COLOR/g, newSecondaryColor)
 
 
     }