baclight/app/javascript/controllers/add_plan_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
    static values = {
        formColor: { type: Array, default: [] } // Declares 'items' as an Array value
    }
    static targets = ["template", "container", "plan", "button"]

    add(event) {
        console.log("start")
        event.preventDefault()
        event.stopPropagation()

        const content = this.#updateTemplatePlan()

        this.buttonTarget.insertAdjacentHTML("beforebegin", content)

    }

    remove(event) {
        event.preventDefault();
        const wrapper = event.target.closest(".plan-item");
        if (wrapper.dataset.newRecord === "true") {
            wrapper.remove();
        } else {
            wrapper.style.display = "none";
            const destroyInput = wrapper.querySelector("input[name*='[_destroy]']");
            if (destroyInput) {
                destroyInput.value = "1";
            }
        }
    }

    #updateTemplatePlan() {
        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)


    }
}