Добавить подзаголовок к основному

Question

У меня есть следующее всплывающее окно, когда я добавляю имя в поле Имя, оно генерирует для меня разные заголовки.Теперь я хочу сделать подзаголовок для каждого заголовка.Для этого я добавил родительское окно в мое окно, которое теперь не получает ничего для первого ввода. Если пользователь добавляет имя в поле Имя, оно должно быть добавлено в родительское поле в виде списка основных заголовков, после чего пользователь может выбрать основной заголовок из этого.список и добавить подзаголовок к основному заголовку.Но я не знаю, как добавить основной заголовок в родительский блок.Также в базе данных я добавил логический родительский столбец, чтобы определить основной заголовок из подзаголовка. Всплывающее окно

<span>Parent</span> <br />
<select class="addHeader-heading" placeholder="None" style="width: 100%;">
    <option value="" selected>None</option>
</select><br /><br />

<span>Name</span> <br />
<input type="text" class="addHeader-name" style="width: 100%;"><br /><br />


<input type="button" value="Save" style="width: 120px;" class="addHeader-save btn" />
<input type="button" value="Cancel" style="width: 120px;" class=" btn" onclick="$('#addHeaderPopup').trigger('close');" />
</div>
</div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('.addHeader-save').on('click', function () {
            //save
            $.ajax({
                url: "/api/BudgetAPI/AddHeader/?ah_name=" + $('.addHeader-name').val() + "&ah_budgetId=" +
                $('.selectBudget').val() + "&ah_type=" + $('.addHeader-type').val() + "&ah_header=" + $('.addHeader-heading').val()+
                "&ah_id" + $('.addHeader-id').val(),
                type: "POST",
                data: null,
                cache: false,
                statusCode: {
                    200: function (data) {                                                      
                        $('.addHeader-name').val('');

                        $('#addHeaderPopup').trigger('close');
                        getHeaderName()

                    }
                }
            });
        });
    });

    function getHeaderName(id) {
        $.ajax({
            url: "/api/BudgetAPI/GetHeader/?gsh_hId=" + id,
            type: "GET",
            data: null,
            cache: false,
            statusCode: {
                200: function (data) {

                    $('.addHeader-heading').html('<option value="" selected>None</option>');
                    data.forEach(function (header) {
                        if ($('.addHeader-heading').val($('.addHeader-heading').children().first().val())) {
                            $('.addHeader-heading').append('<option value="' + header.id + '" > ' + header.name + '</option >');
                                $('.addHeader-name').append('<option value="' + header.id + '" > ' + header.name + '</option >');
                                } else {
                                    $('.addHeader-name').append('<option value="' + header.id + '" > ' + header.name + '</option >');
                                    }

                                });

                            }
                        }
                    });
                }