Inner footable is not working. As I initialize the second one (servicetable), it is not working.

I came across possible answer https://github.com/fooplugins/FooTable/issues/255

It is from 2014. Can anyone confirm if nested footable is not possible?

My Code:

 <!--Table to show below-->

        <div class="col-md-16">
            <div class="" id="TrackList" style="">
                <table class="trackingtable table table-bordered table-striped table-condensed flip-content footable footable-1 breakpoint breakpoint-lg" data-show-toggle="true"
                       id="tblOnlinePayments"
                       data-paging-size="20" style="width: 100%;


margin-bottom: 20px;">
                    <thead class="flip-content bordered-palegreen">
                        <tr class="footable-header" data-expanded="true">

                            <th class="footable-first-visible" style="display: table-cell;" data-type="string">
                                Service Description
                            </th>
                            <th class='innertableth' data-breakpoints="all" data-type="html">

                            </th>
                        </tr>
                    </thead>

                    <tbody>
                        @foreach (var PackageStatus in Model.PackageStatus)
                        {
                            if (PackageStatus.PackageID == item.PackageID)
                            {
                                <tr>
                                    <td class="footable-first-visible">
                                        @PackageStatus.Description
                                    </td>
                                    <td>

                                        <table class="servicetable table table-bordered table-striped table-condensed flip-content footable footable-1 breakpoint breakpoint-lg" data-show-toggle="true"
                                               style="width: 100%;">

                                            <thead>
                                                <tr>
                                                    <th style="padding: 10px;text-align: center;">Service</th>
                                                    <th style="padding: 10px;text-align: center;">Service Quantity</th>
                                                    <th style="padding: 10px;text-align: center;">Availed So Far</th>
                                                    <th class='innertableth' data-breakpoints="all" data-type="html"></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach (var service in PackageStatus.Services)
                                                {
                                                    <tr>

                                                        <td style="padding: 10px; display: table-cell;" class="">@service</td>
                                                        <td style="padding: 10px; display: table-cell;" class="">@PackageStatus.Quantity</td>
                                                        <td style="padding: 10px; display: table-cell;" class="">@PackageStatus.AVAILED</td>

                                                        <td>
                                                            <div class="custom-table" style="padding-bottom: 15px;padding-right: 12px;">
                                                                <div class="row header">
                                                                    <div class="headerborder">Service</div>
                                                                    <div class="headerborder">Availed Date</div>
                                                                </div>

                                                                @foreach (var availdate in PackageStatus.AvailedDates)
                                                                {
                                                                    <div class="row" style="margin-top: -1px">
                                                                        <div class="cell">@service</div>
                                                                        <div class="cell">
                                                                            @if (availdate == null)
                                                                            {
                                                                                <span style="text-align: center">-</span>
                                                                            }
                                                                            else
                                                                            {
                                                                                <span style="color: green">@Utility.UtilityHelper.FormatDate(availdate)</span>
                                                                            }
                                                                        </div>
                                                                    </div>
                                                                    break;
                                                                }

                                                            </div>

                                                        </td>

                                                    </tr>
                                                }

                                            </tbody>
                                        </table>


                                    </td>
                                </tr>
                            }
                        }
                    </tbody>


                </table>
            </div>

        </div>
        <!--Table ENDS-->

Initialization:

<script>
jQuery(function ($) {
    $('.trackingtable').footable();
});
//table shows only if I remove this
jQuery(function ($) {
    $('.servicetable').footable();
});

If I remove this line:

jQuery(function ($) {
        $('.servicetable').footable();
    });

It shows the table at least after expanding