Append Issue

 <form method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form_set.management_form }}
    <table class="table-striped" id="dynamic_form_table">
      <tbody>
      {% for aspect_form in form_set.forms %}
        <tr class="dynamic-form">
          <td class="col-sm-10">
            {% form form=aspect_form %}
            {% endform %}
          </td>
          <td id="delete_column">
            <button id="remove-{{ aspect_form.prefix }}-row"
                    class="delete-row btn">Delete
            </button>
          </td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
    <br>
    <div class="container">
      <button class="add-row btn" id="add_aspect">+ Add Aspect</button>
    </div>
    <button type="submit" class="btn">Submit</button>
    <table class="table table-borderless">
      <tbody>
      <tr class="dynamic-form-adder" style="display: none">
        <td class="col-sm-10">
          {% form form=form_set.empty_form %}
          {% endform %}
        </td>
        <td id="delete_column">
          <button id="remove-form-__prefix__-row"
                  class="delete-row btn">Delete
          </button>
        </td>
      </tr>
      </tbody>
    </table>
  </form>

<script>
    $(function () {
      $('.add-row').click(function () {
        let runSelectTagPostProcessing = false;
        return addForm(this, 'form', runSelectTagPostProcessing);
      });
      $('.delete-row').click(function () {
        deleteForm(this, 'form');
      })
    });
  </script>

function addForm(btn, prefix, select_post_processing) {
    var formCount = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
    var row = $('.dynamic-form-adder').clone(true).get(0);
    //change the cloned row class name
    var brand_tr_class_name = $(row).attr('class');
    $(row).removeClass(brand_tr_class_name);
    $(row).addClass('dynamic-form');
    //insert into the table as the last element
    $(row).removeAttr('id');
    $(row).removeAttr('style');
    //replace the empty form __prefix__ with the actual form number count
    var replace_prefix = $(row).html().replace(/__prefix__/g, formCount);
    $(row).html(replace_prefix);

    $(row).find('*').each(function () {
        updateElementIndex(this, prefix, formCount);
        $(this).val('');
    });
    $(row).find('.delete-row').click(function () {
        deleteForm(this, prefix);
    });
    $('#id_' + prefix + '-TOTAL_FORMS').val(formCount + 1);
    $('#dynamic_form_table tbody').append($(row));
    if (select_post_processing == true) {
        selectPostProcessing(formCount);
    }
    return false;
}

function selectPostProcessing(formCount) {
    // Very hacky method which exists because there is duplication in select tag
    // after it gets appended to the table. Essentially replace the child select(nested select duplicate) with the parent
    // select tag, thus deduplicating. Remove once the root cause is identified.
    let select_id = "#id_form-" + formCount + "-crawl_entity_container";
    let select_to_be_replaced = $(select_id)[0].childNodes[3];
    let select_replacee = $(select_id)[0].childNodes[3].childNodes[3];
    $(select_to_be_replaced).replaceWith(select_replacee);
    let select_options_parent = "#id_form-" + formCount + "-crawl_entity";
    let select_options = $(select_options_parent)[0].childNodes;
    let counter = 0;
    // the below code exists because for some reason the value field for select tag
    // is non existent. Remove once the root cause is identified
    let values_copy = $.merge([], values);
    $(select_options).each(function () {
        if ($(this).prop('tagName') == "OPTION") {
            if (counter != 0) {
                $(this).val(values_copy.pop());
            }
            counter = counter + 1;
        }
    });

}