jQuery создает таблицы из JSON и группирует их в расширяемые строки

Question

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

 var response = [
                {
                "mezzo":"fiat punto",
                "tipologia":"auto",
                "id":"1"
                },
                {
                "mezzo":"fiat punto",
                "tipologia":"auto",
                "id":"2"
                },
                {
                "mezzo":"fiat punto",
                "tipologia":"auto",
                "id":"3"
                },
                {
                "mezzo":"alfa giulia",
                "tipologia":"auto",
                "id":"1"
                },
                {
                "mezzo":"alfa giulia",
                "tipologia":"auto",
                "id":"2"
                },
                {
                "mezzo":"fiat punto",
                "tipologia":"auto",
                "id":"4"
                },
                {
                "mezzo":"alfa giulia",
                "tipologia":"auto",
                "id":"3"
                }
            ];

Я хочу сгруппировать свою таблицу результатов, используя поле "mezzo", поэтому я пытаюсь отсортировать массив:

    response.sort(function(a,b){
        var mezzoA = a.mezzo.toLowerCase();
        var mezzoB = b.mezzo.toLowerCase();
        if (mezzoA > mezzoB) {
            return -1;
        }
        if (mezzoA < mezzoB) {
            return 1;
        }
        return 0;
    });

теперь код jQuery: я пытаюсь создать элементы и добавить их в DOM с помощью цикла .each ().прокомментированный код работает с жестко закодированной демонстрацией, но теперь я должен сгруппировать строки, соответствующие полю "mezzo", в одну расширяемую строку:

$(function () {
        var parentFrag = document.createDocumentFragment();   

        $.each(response, function(i, item) {
            var parentTr = document.createElement('tr');
            var parentTd = '<td><a href="#">></a></td><td>' + item.mezzo + '</td><td>' + item.tipologia + '</td><td>' + item.id +'</td>';
            parentTr.innerHTML = parentTd;
            parentFrag.appendChild(parentTr);
        })

        var parentTable = $('.parent');
            parentTable[0].appendChild(parentFrag);

        // Expand-Collapse details table
        // $('table table').hide();

        // $('td > a').on('click', function (e) {
        //     e.preventDefault();
        //     $(this).closest('tr').next().find('table:first').toggle();
        // });
    });

Это мой HTML-файл:

    <table border="1">
    <thead>
        <tr>
            <td></td>
            <td>Mezzo</td>
            <td>Tipologia</td>
            <td>ID</td>
        </tr>
    </thead>
    <tbody class="parent">

    </tbody>
</table>