Как динамически добавлять thead, tr, th и td в таблицу, используя jQuery?

Question

Я пытаюсь сгенерировать таблицу, используя данные из контроллера webAPI.Я заставил эту часть работать, но у меня возникли проблемы с использованием jQuery для динамического добавления заголовков и строк таблицы.

Я пробовал различные методы, но все они не возвращают нужный мне результат.

Это мой HTML-код:

<div class="row">
    <div class="col-4" id="table" >

    </div>
    <div class="col-8">
        <div class="row">


            <div class="col-12" id="graph">
                <p class="text-center">Select an expiation description to continue...</p>

            </div>
        </div>
    </div>
</div>

Я пытаюсь добавить динамическую таблицу в div id = "table".

Это последний биткод, который я пробовал до сих пор:

<script>



        $('<h2>').addClass('text-center').text('Speeding Category by Year').appendTo('#table');
        var $mainTable = $('<table>').addClass('table table-striped table-hover');
        $('<thead>').appendTo($mainTable);
        $($mainTable.find('thead')).append('<tr></tr>');
        $($mainTable.find('thead tr')).append('<th class="text-left">Speeding Category</th> <th class="text-right">Tickets Issued</th>')


        var array = $.ajax({
            url: "/api/ExpiationsWebAPI",
            type: "GET",
            dataType: "json",                       
            success: function () { alert("Sucess"); },            
            timeout: 10000

        });

        var year = 0;
        i = 1;
        array.done(function (data) {
            $.each(data, function (i, obj) {
                if (obj.year != year) {

                    year = obj.year
                    $('<thead>').appendTo($mainTable);
                    $('<tr>').appendTo($mainTable.find('thead').eq(i));
                    $('<th>').text(obj.year).addClass('table-info text-center').attr('colspan', '3').appendTo($mainTable.find('.year' + obj.year));    
                    i++;

                }
            })

        })

        $mainTable.appendTo('#table');


    </script>

это то, что этот фрагмент кода отображает

текущий код

это то, что я пытаюсьдостичь:

Результат, который я ищу