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:

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(
            $('
')
          );                            
      }
    }
  }
});
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




Update 2:





data.results[i].id VIP October 28, 2017 12:16












    
        
            
            Name
            Access
            Date
        
    
    
        
            
                
            
            Brian Stevens
            
                VIP
            
            
                October 28, 2017 12:16
            
        
    
    
        
            
            + $185,00
            Stripe
            
                October 19, 2017 12:16

user_3289660 · Answer

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
                        (`
                        
                            
                                
                            
                            ${item.id}
                            
                                VIP
                            
                            
                                October 28, 2017 12:16
                            
                        
                    
                    
                        
                            
                            + $185,00
                            Stripe
                            
                                October 19, 2017 12:16
                            
                        
                        
                    `);
                });
            }
            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")
                }
            })
        }
    }
});

jQuery Collapse is not working as expected

1 Answers