Как создать расширяемую таблицу уровня N, используя jquery / javascript?

Question

В настоящее время с опциями переключения и свертывания данных я могу расширять только данные первого уровня, это не работает для многоуровневого расширения строк. Ссылка показывает токовый выход Токовый выход

Каждая строка должна быть расширяемой. При первой загрузке должны быть видны только данные уровня 1. При расширении каждой строки дочерняя строка должна быть видимой, если у дочерней строки больше дочерних элементов, то только при расширении дочерней строки ее дети должны быть видимыми. Короче говоря, каждая строка должна иметь функции переключения в таблице.

Ссылка показывает желаемый вывод Желаемый вывод

CSS -

.collapsed .icon-class:before {
    content: '+';
}
.icon-class:before {
    content: '-';
}

JS -

$(document).ready(function(){
    $('[data-toggle="collapse"]').on('click', function() {
        console.log("toggled");
      $(this).toggleClass('collapsed');
            });
        });

HTML -

<div id="mainParent" aria-expanded="true" class="list-group-item">
          <table class="table">
            <thead>
              <tr>
                <tr>
                    <th></th>
                    <th width="45">Name</th>
                    <th width="10">Title</th>
                    <th width="10">State</th>
                    <th width="10">Fn </th>
                </tr>
            </thead>
            <tbody>
            <#list suppliers as SupplierBean>
            <#if SupplierBean.level == "1">
            <#assign mainParent = "expandLevel1">
              <tr class="collapsed " data-toggle="collapse" data-target=".expandLevel1" id="row1">
                <td class="icon-class"></td>
                <td><input class="Items" type="checkbox"/>${SupplierBean.partname}</td>
                <td>${SupplierBean.title}</td>
                <td>${SupplierBean.state}</td>
                <td>${SupplierBean.fn}</td>
                </tr>
            </#if>
            <#if SupplierBean.level == "2">
            <#assign subChild = "expandLevel2">
              <tr class="collapse expandLevel1" data-toggle="collapse" data-target="${subChild}">
                <td class="icon-class"></td>
                <td><input type="checkbox"/>${SupplierBean.partname}</td>
                <td>${SupplierBean.title}</td>
                <td>${SupplierBean.state}</td>
                <td>${SupplierBean.fn}</td>
                </tr>
            </#if> 

            <#if SupplierBean.level == "3">
            <tr class="collapse expandLevel2" data-toggle="collapse">
                <td class="icon-class"></td>
                <td><input type="checkbox"/>${SupplierBean.partname}</td>
                <td>${SupplierBean.title}</td>
                <td>${SupplierBean.state}</td>
                <td>${SupplierBean.fn}</td>
                <td>${SupplierBean.qty}</td>
                <td>${SupplierBean.author}</td>
                <td>${SupplierBean.unitofmeasure}</td>  
            </tr>
        </#if>

            </#list>
            </tbody>
          </table>
        </div>