I am currently using the following two functions to dynamically create a collapsible list from an object which contains info on the individual parts within the object. I have also included a checkbox for each item in the collapsible list, but that check box always appears right next to the names. I would prefer these checkboxes to be in the same row as the list item, but in a separate column so that it looks neater. I might also add more columns later on with material info. So I was trying to figure out how I can do this with my current setup below or if there was a better way to achieve what I want instead of using my list.

<div class="objtree"></div>

function check(obj) {
    var html = '';
    var name = obj.name ? obj.name +' (' +obj.type+')' : obj.type;
    html +='<div class="node">'
    html += '<li class="ntitle">' + name + '<input type="checkbox" name="'+(obj.id-id)+'" value="checked" onchange="snap(this)"/></li>';

    if (obj.children) {
        html += '<ul class="children hide">';
        for (var i = 0; i < obj.children.length; i++) {
            html += check(obj.children[i],)
        }
        html += '</ul>';
    }
    html += "</div>";
    return html;
}
function assignEvent() {
    $('.ntitle').click(function () {
        var p = $(this);
        var c = p.parent().find('.children:first')
        if (c.hasClass('hide')) {
            c.removeClass('hide');
            p.addClass('open');
        }
        else {
            c.addClass('hide');
            p.removeClass('open');
        }
    })
}

The following is what I currently have which is collapsible if I click on the items:

And I am trying to achieve the following: