在主标题上添加子标题

Question

当我在“名称”框中添加名称时，会出现以下弹出窗口，它将为我生成不同的标题。现在，我想为每个标题制作一个子标题。为此，我在窗口中添加了父框，如果用户将名称添加到“名称”框，它应该作为主标题列表添加到父框中，那么用户在第一个输入中就不会获得父标题，然后用户可以从中选择主标题列出子标题并将其添加到主标题。但我不知道如何将主标题添加到父框。 同样在数据库中，我添加了一个布尔父列，以根据子标题确定主标题。 Pop up window

<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 >');
                                    }

                                });

                            }
                        }
                    });
                }