Как реализовать зависимые выпадающие списки в Django formset

Ниже представлен код скриптов, которые хорошо работают в наборе форм Django, но только в первом наборе форм. Когда я добавляю еще один, он показывает мне список компонентов только первого продукта.

Как я могу сделать функцию выпадающего списка более динамичной, чтобы она меняла, например, form-0 на form-1 при создании второго набора форм?

Буду благодарен за любую помощь.

мой html-файл

<body>
<form id="form-container" method="POST" data-components-url="{% url 'ajax_load_components' %}">
    {% csrf_token %}

    {{ce_request_formset.management_form}}
    
    {% for form in ce_request_formset %}
    <div class="ce-request-form">
      {{ form|crispy }}
    </div>
    {% endfor %}
    <button id="add-form" type="button">Add component</button>
    <button type="submit">Send CE</button>
</form>
</body>

<script>
  // Script to handle adding new forms in html file
  let CERequestForm = document.querySelectorAll(".ce-request-form")
  let container = document.querySelector("#form-container")
  let addButton = document.querySelector("#add-form")
  let totalForms = document.querySelector("#id_form-TOTAL_FORMS")

  let formNum = CERequestForm.length-1
  addButton.addEventListener('click', addForm)

  function addForm(e){
      e.preventDefault()

      let newForm = CERequestForm[0].cloneNode(true)
      let formRegex = RegExp(`form-(\\d){1}-`,'g')

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

  // Script to handle dependent dropdown lists
  $("#id_form-0-related_product").change(function () {
    var url = $("#form-container").attr("data-components-url");
    var related_product_id = $(this).val();

    $.ajax({
      url: url,
      data: {
        'related_product': related_product_id
      },
      success: function (data) {
        $("#id_form-0-related_component").html(data);
      }
    });

  });

</script>
Вернуться на верх