How can I add a mdc-web sub-header from json object?

Question

So, I am trying to put a sub-header before each listing from a certain category. I am using material.io and this is my AJAX success code...

    request.done(function (body) {
    $.each(body.categories, function (idx, obj) {
        console.warn(obj.name)
        $("#productGroup").append('<h3 class="mdc-list-group__subheader">'+obj.name+'</h3>');
        $.each(obj.packages, function (idx, pack) { 
            console.log(pack.name);
            $("#productList").append(' <li class="mdc-list-item"><img class="mdc-list-item__start-detail" src="https://unsplash.it/200?random&blur" width="56" height="56" alt="Picture of Janet Perkins"> <span class="mdc-list-item__text"> '+pack.name+' <span class="mdc-list-item__text__secondary">'+pack.price+'</span> </span> <a class="mdc-list-item__end-detail material-icons" aria-label="View more information" title="More info" onclick="event.preventDefault();"> add_shopping_cart </a> </li>');
        });
    });
});

But when I look over I get this: https://i.stack.imgur.com/hoMiA.png (they are all at bottom)

How can I fix that?