динамически добавляемая строка во встроенный набор форм, не отраженная в запросе публикации в views.py в django

Я пытаюсь добавить динамические формы в свой встроенный набор форм, используя шаги, упомянутые в сообщении: Добавить динамическую форму в набор форм django, правильно используя javascript

У меня есть встроенные наборы форм, которые я визуализирую с помощью четких форм.

код рендеринга в шаблоне:

            <div>
                {{ formset.management_form|crispy }}
            </div>
            <div id="items-form-container">
            {% for form in formset.forms %}
            <div id="item-{{ forloop.counter0 }}">
                {% crispy form formset.crispy_helper %}
            </div>
            {% endfor %}                
            </div>  

пустой шаблон формы используется для добавления новых строк:

                    <script type="text/html" id="item-template">
                <div id="item-__prefix__">
                {% crispy formset.empty_form formset.crispy_helper %} 
                </div>
                </script>
                <a href="#" id="add-item-button" class="btn btn-info add-profile_kvp">Add profile_kvp</a>

У меня есть небольшой код javascript для обработки при нажатии кнопки и обновлении html и формы управления:

$(document).ready(function() {
    $('.add-profile_kvp').click(function(ev) {
        ev.preventDefault();
        var count = parseInt($('#id_profile_kvp-TOTAL_FORMS').val());
        var tmplMarkup = $('#item-template').html();
        var compiledTmpl = tmplMarkup.replace(/__prefix__/g, count);
        $('div#items-form-container').append(compiledTmpl);

        // update form count
        $('#id_profile_kvp-TOTAL_FORMS').val(count+1);

    });
});

Когда я нажимаю кнопку Добавить кнопку profile_kvp, я могу правильно обновить DOM с новыми значениями, и это отлично выглядит в браузере.

Проблема возникает, когда я отправляю набор форм, тогда я не вижу динамически добавляемых форм / строк в наборе форм в views.py и поэтому не могу просматривать динамически добавленные значения на стороне сервера. На стороне сервера я вижу новые строки как пустые строки без данных. Я вижу, что общее значение форм обновлено, но все новые формы пусты.

Любая помощь приветствуется.

Обновление: с помощью отладчика я мог видеть, что динамически добавленные формы не имеют поля значения в них:

    form1 = with proper value = forms one was there by default using extra = 1
<tr><th><label for="id_profile_kvp-0-key">Key:</label></th><td><input id="id_profile_kvp-0-key" maxlength="255" name="profile_kvp-0-key" type="text" value="1" /></td></tr>
<tr><th><label for="id_profile_kvp-0-value">Value:</label></th><td><input id="id_profile_kvp-0-value" maxlength="255" name="profile_kvp-0-value" type="text" value="1" /></td></tr>
<tr><th><label for="id_profile_kvp-0-DELETE">Delete:</label></th><td><input id="id_profile_kvp-0-DELETE" name="profile_kvp-0-DELETE" type="checkbox" /><input id="id_profile_kvp-0-id" name="profile_kvp-0-id" type="hidden" value="49" /><input id="id_profile_kvp-0-profile" name="profile_kvp-0-profile" type="hidden" value="54" /></td></tr>

form2 added dynamically
<tr><th><label for="id_profile_kvp-1-key">Key:</label></th><td><input id="id_profile_kvp-1-key" maxlength="255" name="profile_kvp-1-key" type="text" /></td></tr>
<tr><th><label for="id_profile_kvp-1-value">Value:</label></th><td><input id="id_profile_kvp-1-value" maxlength="255" name="profile_kvp-1-value" type="text" /></td></tr>
<tr><th><label for="id_profile_kvp-1-DELETE">Delete:</label></th><td><input id="id_profile_kvp-1-DELETE" name="profile_kvp-1-DELETE" type="checkbox" /><input id="id_profile_kvp-1-id" name="profile_kvp-1-id" type="hidden" /><input id="id_profile_kvp-1-profile" name="profile_kvp-1-profile" type="hidden" /></td></tr>

form3 added dynamically
<tr><th><label for="id_profile_kvp-2-key">Key:</label></th><td><input id="id_profile_kvp-2-key" maxlength="255" name="profile_kvp-2-key" type="text" /></td></tr>
<tr><th><label for="id_profile_kvp-2-value">Value:</label></th><td><input id="id_profile_kvp-2-value" maxlength="255" name="profile_kvp-2-value" type="text" /></td></tr>
<tr><th><label for="id_profile_kvp-2-DELETE">Delete:</label></th><td><input id="id_profile_kvp-2-DELETE" name="profile_kvp-2-DELETE" type="checkbox" /><input id="id_profile_kvp-2-id" name="profile_kvp-2-id" type="hidden" /><input id="id_profile_kvp-2-profile" name="profile_kvp-2-profile" type="hidden" /></td></tr>