Как добавить новый столбец для каждого массива с помощью js

Question

Я хочу показать несколько значений ответов в макете столбца таблицы.Из ввода я получаю первый ответ, который содержит несколько подпунктов, после чего делается запрос для всех подпунктов.Примечание: я не знаю количество подпунктов, также я не знаю длину ответа по подпункту.

Код до сих пор:

function getallhistory(data) {
//cutting the return array by 2
var asd = vagdalo(data, 2)
var table = document.getElementById('outpout');
var tr = table.tHead;
var tb = table.getElementsByTagName('tbody')[0];
while (tr.hasChildNodes()) {
    tr.removeChild(tr.lastChild);
}
var thr = document.createElement("tr");
for (var i = 0; i < asd.length; i++) {
    console.log(asd[i][0]);
    var th = document.createElement("th");
    th.innerHTML = "" + asd[i][0] + " ";
    thr.appendChild(th);
}
tr.appendChild(thr);
$.each(asd, function (key, value) {
    var row, cell, text, r, c;
    $.ajax(
        {
            url: "/Home/TrGSNHD/",
            type: "POST",
            dataType: 'json',
            contentType: 'application/json',
            data: JSON.stringify({ SNR: value[0], SNRP: value[1] }),
            success: function (got) {
                console.log(got);
                for (r = 0; r < got.result.bookingValues.length; r++) {
                    row = document.createElement('tr');
                    for (c = 0; c < asd.length; c++) {
                        cell = document.createElement('td');
                        text = document.createTextNode(got.result.bookingValues[r]);
                        cell.appendChild(text);
                        row.appendChild(cell);
                    };
                    tb.appendChild(row);
                }

            },
            error: function (xhr, status, p3, p4) {
                var err = "Error " + " " + status + " " + p3;
                if (xhr.responseText && xhr.responseText[0] == "{")
                    err = JSON.parse(xhr.responseText).message;
                console.log(err);
            }
        });
});
}

Я получаю толькопоследний ответ в столбцах.

Я также пытался создать многомерный массив, выдвигая ответы, но не мог дождаться завершения всех запросов ...

Что я хочу:

<table style="width: 382.4px;">
<tbody>
<tr>
<td style="width: 62px;">&nbsp;request1</td>
<td style="width: 62px;">&nbsp;request2</td>
<td style="width: 62px;">&nbsp;request3</td>
<td style="width: 62px;">&nbsp;request4</td>
<td style="width: 62px;">&nbsp;request5</td>
</tr>
<tr>
<td style="width: 62px;">&nbsp;response1data1&nbsp;</td>
<td style="width: 62px;">&nbsp;response2data1&nbsp;</td>
<td style="width: 62px;">&nbsp;response3data1&nbsp;</td>
<td style="width: 62px;">&nbsp;response4data1&nbsp;</td>
<td style="width: 62px;">&nbsp;response5data1&nbsp;</td>
</tr>
<tr>
<td style="width: 62px;">&nbsp;response1data2&nbsp;</td>
<td style="width: 62px;">&nbsp;response2data2&nbsp;</td>
<td style="width: 62px;">&nbsp;response3data2&nbsp;</td>
<td style="width: 62px;">&nbsp;response4data2&nbsp;</td>
<td style="width: 62px;">&nbsp;response5data2&nbsp;</td>
</tr>
<tr>
<td style="width: 62px;">&nbsp;....</td>
<td style="width: 62px;">&nbsp;....</td>
<td style="width: 62px;">&nbsp;...</td>
<td style="width: 62px;">&nbsp;...</td>
<td style="width: 62px;">&nbsp;....</td>
</tr>
</tbody>
</table>