resident form

{% extends 'dashboard/base.html' %}
{% block content %}
<form method="post">
  {% csrf_token %}
  {{ wizard.management_form }}

  <h2>Primary Applicant Addresses</h2>
  {{ wizard.form.primary_addresses|pprint }}

  {{ wizard.form.primary_addresses.management_form }}
  <div id="primary-addresses">
      {% for form in wizard.form.primary_addresses %}
          <div class="address-form">

              {{ form.as_p }}
          </div>
      {% endfor %}
  </div>
  <button type="button" onclick="addForm('primary')">Add Primary Address</button>

  <h2>Secondary Applicant Addresses</h2>
  {{ wizard.form.secondary_addresses.management_form }}
  <div id="secondary-addresses">
      {% for form in wizard.form.secondary_addresses %}
          <div class="address-form">
              {{ form.as_p }}
          </div>
      {% endfor %}
  </div>
  <button type="button" onclick="addForm('secondary')">Add Secondary Address</button>

  <button type="submit">{% if wizard.steps.prev %}Next Step{% else %}Submit{% endif %}</button>
</form>

<script>

  function addForm(prefix) {
      const formsDiv = document.getElementById(`${prefix}-addresses`);
      const totalForms = document.getElementById(`id_${prefix}-TOTAL_FORMS`);

      if (!totalForms) {
          console.error(`Total forms element not found for ${prefix}`);
          return;
      }
      console.log(totalForms.value)

      const newForm = formsDiv.children[0].cloneNode(true);
      const formRegex = new RegExp(`${prefix}_addresses-(\\d+)-`, 'g');
      const formNum = totalForms.value;

      console.log(formRegex)

      newForm.innerHTML = newForm.innerHTML.replace(formRegex, `${prefix}_addresses-${formNum}-`);


      newForm.querySelectorAll('input').forEach(element => {
        element.value = '';
        if (element.id) {
            element.id = element.id.replace("100");
        }
        if (element.name) {
            element.name = element.name.replace("100");
        }
    });
      console.log(newForm)






      formsDiv.appendChild(newForm);







      totalForms.value = parseInt(totalForms.value) + 1;
  }
</script>
{% endblock %}