Как использовать js на событии изменения с форматом django?

В поле, которое я создал с помощью formset, есть типы задач. Я хочу создать новую форму для пользователя в соответствии с выбором типов задач. Например, когда пользователь выбирает покупку товара, я хочу снова скопировать ту же форму. На основе своих исследований я выяснил, что для этого нужно использовать on change, но я понятия не имею, как это реализовать.

Вот мои формы :

class UserTaskForm(forms.ModelForm):
    
    class Meta:
        model = UserTask
        fields = ['user_id','task_types_id','store_house_id','description']

UserTaskFormFormSet = modelformset_factory(
    UserTask,
    fields=('user_id','task_types_id','store_house_id','description',),
    extra=1,
)

вот мой html :

{% extends "main/layout.html" %}
{% load crispy_forms_tags %}



{% block content %}

<div class="row">
    <div class="col-md-6 offset-md-3">
        <h3 align="center">Add New Task</h3>
        <hr>
        <form id="form-container" method="POST">
            {% csrf_token %}
            
            {{ user_task_form.management_form }}
            {% for user_form in user_task_form %}
            
                <div class="usertask-form" id="usertask-form">
                    {{user_form | crispy}}
                </div>
            
            {% endfor %}
            
            {{ formset.management_form }}
            {% for form in formset %}

                <div class="tasksources-form" id="tasksources-form">
                    {{form | crispy}}
                </div>

            {% endfor %}

            <button id="add-form" class="btn btn-success">+Add More Product</button>
            <br>
            <br>
            <button type="submit" class="btn btn-outline-info">Add New Task</button>
        </form>
    </div>
  </div>



  <script>
    let tasksourcesForm = document.querySelectorAll(".tasksources-form")
    let container = document.querySelector("#form-container")
    let addButton = document.querySelector("#add-form")
    let totalForms = document.querySelector("#id_formset-TOTAL_FORMS")

    let formNum = tasksourcesForm.length-1
    addButton.addEventListener('click', addForm)
    
    function addForm(e){
        e.preventDefault()
        $('.select').select2("destroy");
        let newForm = tasksourcesForm[0].cloneNode(true)
        let formRegex = RegExp(`formset-(\\d){1}-`,'g')

        formNum++
        newForm.innerHTML = newForm.innerHTML.replace(formRegex, `formset-${formNum}-`)
        container.insertBefore(newForm, addButton)
        
        totalForms.setAttribute('value', `${formNum+1}`)

        $('.select').select2({
            allowClear: true
        });
    }

</script>



{% endblock content %}

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

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