Вставка полей ввода в существующую HTML-форму

Я пытаюсь сделать форму, которая будет добавлять новый inputs каждый раз, когда пользователь заполняет очередной input. Я создал слушатель событий, который будет выполнять ajax-запрос в бэкэнд и, в случае успеха, приносить элемент input, который будет введен в форму. Это выглядело следующим образом :

            $.ajax({
                type: "GET",
                url: "{% url 'cart:get-delivery' %}",
                data :{
                    city : id
                },
                success: function(res) {
                    $("#delivery").replaceWith(res.component)
                    $('.spinner-overlay').remove();
                },
                error: function(e) {
                    console.log("Failed")
                    $('.spinner-overlay').remove();
                }
            })

форма работает, но когда я отправляю форму, она не распознает мои недавно добавленные поля ввода. так что когда я делаю request.POST.get('example'), они не появляются. есть ли у кого-нибудь решение этой проблемы? также вот добавленный элемент :

{% load humanize %}
{% if content %}
<td id="delivery">
    {% for ins in content %}
        {% for jenis in ins.costs %}
        <div class="form-check">
            <input class="form-check-input" type="radio" name="radio-delivery" id="{{ins.code}}" value="{{jenis.cost.0.value}}|{{ins.code}}|{{jenis.service}}">
            <label class="form-check-label" for="radio-delivery">
            <strong>{{ins.code | upper}}</strong> - {{jenis.service}} : Rp {{jenis.cost.0.value | intcomma}}
            </label>
        </div>
      {% endfor %}
    {% endfor %}
</td>
{% endif %}

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