Как добавить подзаголовок к основному заголовку в asp.net

Question

У меня есть два выпадающих списка для родительских и подзаголовков.Когда я выбираю родительский заголовок, он будет добавлен в мою таблицу, но я не знаю, как добавить подзаголовок к выбранному родительскому заголовку.Теперь, когда я добавляю подзаголовок, он будет добавлен как основной заголовок и перейдет в последний ряд моей таблицы.

<script type="text/javascript">
        $(document).ready(function () {
            populateParentHeaderBox();

            $('.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('');
                            $('.addHeader-heading').val('');
                            $('#addHeaderPopup').trigger('close');
                            getFinPlannerTable();

                        }
                    }
                });
            });

            $('.addHeader-type').on('change', function () {
                populateParentHeaderBox();
            });

            $('.addHeader-header').on('change', function () {
                populateParentHeaderBox();
            });
        });

        //GetHeadersList(bool ghl_isExpense)
        function populateParentHeaderBox() {
            var type = $('.addHeader-type').val() == "EXPENSES" ? true : false;
            var mtxId = $('.selectBudget').val();
            $.ajax({
                url: "/api/BudgetAPI/GetHeadersList/?ghl_isExpense=" + type + "&ghl_mtxBId=" + mtxId,
                type: "GET",
                data: null,
                cache: false,
                statusCode: {
                    200: function (data) {
                        $('.addHeader-heading').html('<option value="0">No Parent</option>');
                        data.forEach(function (header) {
                            $('.addHeader-heading').append('<option value="' + header.id + '">' + header.name + '</option>');
                        });

                        $('.addHeader-heading').change(function (row) {
                            if ($(this).val() != "No Parent") {
                                $('.budget-planner-table-row-item table-left-col').html('<option value="' + row.id + '">' + row.name + '</option>');
                                ('.budget-planner-table-row-item table-left-col' + row.name.parent).ppend('<option value="' + row.id + '">' + row.name + '</option>');
                            }
                        });

                    }
                }
            });
        }