jQuery Collapse is not working as expected

Question

Current situation:

I have a html page with a table to show my data. The data is coming from an jQuery ajax response. I append the data to the table. But for some reason it's showing the data two times and the css is not working for the append part. The css is handle by the template which i'm using

HTML:

<table id="js-table-sections" class="js-table-sections table table-hover">

jQuery:

$('.js-data-example-ajax').select2({
  ajax: {
    url: '/product/api/elasticsearch',
    dataType: 'json',
    width: 'resolve', // need to override the changed default
    minimumResultsForSearch: -1,
    dropdownCssClass: 'select2-hidden',

    success: function (data) {
      // var returnedData = data;
      // clear table
      $('#js-table-sections tbody').empty();                    
      // addProducts(data.results[0]);                              
      for(let i = 0; i < data.results.length; i++){
        $("#js-table-sections")
          .find('tbody')
          .append(
            $('<tr><td class="text-center"><i class="fa fa-angle-right"></i></td><td class="font-     w600">data.results[i].id</td><td><span class="badge badge-success">VIP</span></td><td class="d-none d-sm-table-cell"><em class="text-muted">October 28, 2017 12:16</em></td></tr></tbody>')
          );                            
      }
    }
  }
});

Goal to achieve:

• Why M I getting duplicate content
• Is there an efficient way to append data to my table

Update: .js-data-example-ajax is being imported from this css

<!-- select2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/gh/ttskch/select2-bootstrap4-theme@master/dist/select2-bootstrap4.min.css" rel="stylesheet">

Update 2:

<table id="js-table-sections" class="js-table-sections table table-hover">
    <thead>
        <tr>
            <th style="width: 30px;"></th>
            <th>Name</th>
            <th style="width: 15%;">Access</th>
            <th class="d-none d-sm-table-cell" style="width: 20%;">Date</th>
        </tr>
    </thead>
    <tbody class="js-table-sections-header show table-active">
        <tr>
            <td class="text-center">
                <i class="fa fa-angle-right"></i>
            </td>
            <td class="font-w600">Brian Stevens</td>
            <td>
                <span class="badge badge-success">VIP</span>
            </td>
            <td class="d-none d-sm-table-cell">
                <em class="text-muted">October 28, 2017 12:16</em>
            </td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td class="text-center"></td>
            <td class="font-w600 text-success">+ $185,00</td>
            <td class="font-size-sm">Stripe</td>
            <td class="d-none d-sm-table-cell">
                <span class="font-size-sm text-muted">October 19, 2017 12:16</span>
            </td>
        </tr>                                   
    </tbody>                                                    
</table>

Answer 1

Firstly, you need to correct the syntax to get the right structure for your collapse to work. Secondly, once you finish append(), you need to call the collapse logic again. Please find below the modified version

$('.js-data-example-ajax').select2({
    ajax: {
        url: '/product/api/elasticsearch',
        dataType: 'json',
        width: 'resolve', // need to override the changed default
        minimumResultsForSearch: -1,
        dropdownCssClass: 'select2-hidden',

        success: function (data) {
            let table = $('#js-table-sections');
            table.find('tbody').remove();
            if (data && Array.isArray(data.results)) {
                data.results.forEach(item => {
                    table.append
                        (`<tbody class="js-table-sections-header table-active">
                        <tr>
                            <td class="text-center">
                                <i class="fa fa-angle-right"></i>
                            </td>
                            <td class="font-w600">${item.id}</td>
                            <td>
                                <span class="badge badge-success">VIP</span>
                            </td>
                            <td class="d-none d-sm-table-cell">
                                <em class="text-muted">October 28, 2017 12:16</em>
                            </td>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr>
                            <td class="text-center"></td>
                            <td class="font-w600 text-success">+ $185,00</td>
                            <td class="font-size-sm">Stripe</td>
                            <td class="d-none d-sm-table-cell">
                                <span class="font-size-sm text-muted">October 19, 2017 12:16</span>
                            </td>
                        </tr>
                        <!--  <tr>
                            <td class="text-center"></td>
                            <td class="font-w600 text-success">+ $${item.rma}</td>
                            <td class="font-size-sm">Stripe</td>
                            <td class="d-none d-sm-table-cell">
                                <span class="font-size-sm text-muted">October 1, 2017 12:16</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-center"></td>
                            <td class="font-w600 text-success">+ $51,00</td>
                            <td class="font-size-sm">Stripe</td>
                            <td class="d-none d-sm-table-cell">
                                <span class="font-size-sm text-muted">October 9, 2017 12:16</span>
                            </td>
                        </tr> -->
                    </tbody>`);
                });
            }
            jQuery(".js-table-sections-header > tr").on("click.cb.helpers", function (e) {
                if (!("checkbox" === e.target.type || "button" === e.target.type || "a" === e.target.tagName.toLowerCase() || jQuery(e.target).parent("a").length || jQuery(e.target).parent("button").length || jQuery(e.target).parent(".custom-control").length || jQuery(e.target).parent("label").length)) {
                    var a = jQuery(e.currentTarget).parent("tbody");
                    a.hasClass("show") || jQuery("tbody").removeClass("show table-active"),
                        a.toggleClass("show table-active")
                }
            })
        }
    }
});