Мастер Django Form Wizard не выравнивает динамическую форму

У меня очень специфическая проблема с мастером форм, и после долгих попыток я просто не могу ее решить. Я попытался погуглить, но мне кажется, что это слишком специфично.

На шаге 3 у пользователя есть возможность добавить "контакты". Когда они нажимают на кнопку, у меня есть небольшой JS скрипт, который генерирует форму. Можно добавлять последовательные формы, которые будут выровнены в ряд по 2.

Перейдя к следующему шагу, вы можете вернуться к предыдущему, если что-то забыли. Но при этом 2 контакта, которые были заполнены, появятся в отдельной строке, а не в одной строке. (См. рисунки)

Я понятия не имею, почему это происходит. Я очень надеюсь на гуру, с которыми такое случалось или которые могут заметить что-то в коде. Заранее спасибо!

init.js

function hideInitialFormset(prefix, row) {
    let fields = [];

    if (prefix === "contacts") {
        fields = [$('#id_contacts-0-name').val(), $('#id_contacts-0-funct').val(), $('#id_contacts-0-email').val()];
    } 
    let total = $('#id_' + prefix + '-TOTAL_FORMS');

    if (total.val() === '1') {
        if (fields.includes('')) {
            row.hide();
            total.val('0');
        }
    }
}

main.js

function total_field(prefix) { // get hidden field with jQuery once for performance purposes
    return $('#id_' + prefix + '-TOTAL_FORMS');
}

function max_count(prefix) {
    console.info($('#id_' + prefix + '-MAX_NUM_FORMS').val());
    return $('#id_' + prefix + '-MAX_NUM_FORMS').val();
}

function enable_button(prefix) {
    if (total_field(prefix).val() < max_count(prefix)) {
        if (prefix === 'contacts') {
            $('.add-contact-row').show();
        }
    } else {
        if (prefix === 'contacts') {
            $('.add-contact-row').hide();
        }
    }
}

let contactcount = 0;

function updateElementIndex(elem, prefix, ndx) {
    let id_regex = new RegExp('(' + prefix + '-\\d+)');
    let replacement = prefix + '-' + ndx;

    if ($(elem).attr("for")) $(elem).attr("for", $(elem).attr("for").replace(id_regex, replacement));
    if (elem.id) elem.id = elem.id.replace(id_regex, replacement);
    if (elem.name) elem.name = elem.name.replace(id_regex, replacement);
}

function cloneMore(selector, prefix) {
    let newElement = $(selector).clone(true);
    let totalField = total_field(prefix);
    let total = totalField.val();
    let maxcount = max_count(prefix);
    if (total === '0') {
        totalField.val('1');
        $('.contacts-row').fadeIn('slow');
    } else if (total < maxcount) {
        newElement.find(':input:not([type=button]):not([type=submit]):not([type=reset])').each(function () {
            if ($(this).attr("name")) {
                let name = $(this).attr('name').replace('-' + (total - 1) + '-', '-' + total + '-');
                let id = 'id_' + name;
                $(this).attr({'name': name, 'id': id}).val('').removeAttr('checked')
                if (id.includes('phone') === true) {
                    $(this).val('+31');
                }

                if (id.includes('different_dep') === true) {
                    $(this).css('display', 'none');
                }
            }
        });
        newElement.find('label').each(function () {
            let forValue = $(this).attr('for');
            if (forValue) {
                forValue = forValue.replace('-' + (total - 1) + '-', '-' + total + '-');
                $(this).attr({'for': forValue});
            }
        });
        total++;
        total_field(prefix).val(total);
        $(selector).after(newElement);

        // reveal delete button
        // let conditionRow = $('.' + prefix + '-row:not(:first)');
        // conditionRow.find('.btn.remove-' + prefix + '-row').show()
    }
    enable_button(prefix);
    if (prefix.includes('contacts')) {
        updatephonefields()
    }
    return false;
}

Перед

После

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