Как иметь несколько динамических форм на одной странице?

На одной странице у меня есть несколько одинаковых наборов форм. На других страницах у меня уже есть один набор форм с динамическими кнопками "добавить" и "удалить". Однако javascript начинает вести себя странно, и я не могу повторно использовать переменные в разных наборах инлайн-форм.

Для того, чтобы иметь один динамический из я использую:

   <script>
    document.addEventListener('click', (event) => {
        if (event.target.id === "add") {
            add_form(event)
        }
        if (event.target.id === "remove") {
            remove_form(event)
        }
    })

    function add_form(event) {
        if (event) {
            event.preventDefault()
        }
        const totalNewForms = document.getElementById('id_form-TOTAL_FORMS')
        const currentForms = document.getElementsByClassName('form')
        const currentFormCount = currentForms.length // + 1
        const formCopyTarget = document.getElementById('formset')
        const copyEmptyFormEl = document.getElementById('empty-form').cloneNode(true)
        copyEmptyFormEl.setAttribute('class', 'form')
        copyEmptyFormEl.setAttribute('id', `form-${currentFormCount}`)
        const regex = new RegExp('__prefix__', 'g')
        copyEmptyFormEl.innerHTML = copyEmptyFormEl.innerHTML.replace(regex, currentFormCount)
        totalNewForms.setAttribute('value', currentFormCount + 1)
        // now add new empty form element to our html form
        formCopyTarget.append(copyEmptyFormEl)
    }


    function remove_form(event) {
        if (event) {
            event.preventDefault()
        }
        const totalNewForms = document.getElementById('id_form-TOTAL_FORMS')
        const currentForms = document.getElementsByClassName('form')
        const currentFormCount = currentForms.length
        //const regex = new RegExp(`id_form-${currentFormCount-1}`)
        const deleteFormTarget = document.getElementById(`form-${currentFormCount - 1}`)
        totalNewForms.setAttribute('value', currentFormCount - 1)
        deleteFormTarget.outerHTML = "";
    }
</script>

Я попытался создать контекстные переменные django, уникальные для каждого инлайн-форсета (все одинаковые родительские модели, разные дочерние модели). Я могу установить переменные, но когда я пытаюсь использовать переменные, шаблон django не отображает javascript значение переменной, он отображает только имя контекстной переменной, которую я установил в представлениях.

Пример

Вид:

def get_context_data(self, **kwargs):
    context = super(HXUpdateView, self).get_context_data(**kwargs)
    context['formset'] = InlineFormsetFactory(
        form_kwargs={'user': self.request.user}, instance=self.object, prefix=f"{self.object.pk}-form")

    context['addButton'] = f"add-{self.object.pk}"
    context['total_forms_id'] = f"id_{self.object.pk}-form-TOTAL_FORMS"
    context['totalNewForms'] = f"totalNewForms{self.object.pk}"
    context['FormClass'] = f"{self.object}class"
    context['currentForms'] = f"currentForms{self.object.pk}"
    context['currentFormCount'] = f"currentFormCount{self.object.pk}"
    context['formCopyTarget'] = f"formCopyTarget{self.object.pk}"
    context['eFormsetId'] = f"UpdateFormset{self.object.pk}"
    context['copyEmptyFormEl'] = f"copyEmptyFormEl{self.object.pk}"
    context['emptyForm'] = f"emptyForm{self.object.pk}"
    context['regex'] = f"regex{self.object.pk}"
    context['removeButton'] = f"removeButton{self.object.pk}"
    context['deleteFormTargetId'] = f"deleteFormTargetId{self.object.pk}"
    context['deleteFormTarget'] = f"deleteFormTarget{self.object.pk}"
    context['one'] = 1

    return context

шаблон javascript:

   <script>
        document.addEventListener('click', (event) => {
            if (event.target.id === "{{ addButton }}") {
                add_form(event)
            }
            if (event.target.id === "{{ removeButton }}") {
                remove_form(event)
            }
        })

        function add_form(event) {
            if (event) {
                event.preventDefault()
            }
            const {{ totalNewForms }} = document.getElementById("{{ total_forms_id }}");
            const {{ currentForms }} = document.getElementsByClassName('{{ FormClass }}');
            const {{ currentFormCount }} = {{ currentForms }}.length;
            const {{ formCopyTarget }} = document.getElementById('{{ FormsetId }}');
            const {{ copyEmptyFormEl }} = document.getElementById('{{ emptyForm }}').cloneNode(true);
            {{ copyEmptyFormEl }}.setAttribute('class', '{{ FormClass }}');
            {{ copyEmptyFormEl }}.setAttribute('id', `form-{{ currentFormCount }}`);
            const {{ regex }} = new RegExp('__prefix__', 'g');
            {{ copyEmptyFormEl }}.innerHTML = {{ copyEmptyFormEl }}.innerHTML.replace({{ regex }}, {{ currentFormCount }});
            {{ totalNewForms }}.setAttribute('value', {{ currentFormCount }} + 1);
            {{ formCopyTarget }}.append({{ copyEmptyFormEl }});
            console.log({{ copyEmptyFormEl }});
        }

        function removeform(event) {
            if (event) {
                event.preventDefault()
            }
            const {{ totalNewForms }} = document.getElementById('{{ total_forms_id }}');
            const {{ currentForms }} = document.getElementsByClassName('{{ FormClass }}');
            const {{ currentFormCount }} = {{ currentForms }}.length;
            //const regex = new RegExp(`id_form-${currentFormCount-1}`);
            const {{ deleteFormTarget }} = document.getElementById(`form-${currentFormCount - 1}`)

            console.log({{ deleteFormTarget }})
        }
    </script>

Вернуться на верх