JSFiddle - React, Tailwind, and code Playground

by RaviMakwana

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="main_datatable" class="maintable display nowrap displayflex" cellspacing="0" width="100%">
        <thead>
            <tr> 
                <th class="actionth col1"></th>
                <th class="col2">Item 1</th>
                <th class="col3">Item 2</th>
                <th class="col4">Item 3</th>
                <th class="col5">Item 4</th>
            </tr>
        </thead>
        <tbody class="tbody-panel">
            <tr>
                <td colspan="5">
                    <table class="stepPanelBody display nowrap displayflex">
                        <tr>
                            <td id="clickabletd" class="clicabletd plusicon col1" target="step1-1"></td>
                            <td class="col2">data 3a</td>
                            <td class="col3">data 1b</td>
                            <td class="col4">data 1c</td>
                            <td class="col5">data 1d</td>
                        </tr>
                        <tr id="trPanelstepstep1-1" class="targetDiv" style="display:none;">
                            <td colspan="5" style="padding:10px 30px;">
                             <table id="step1_datatable1" class="tablestep1 display nowrap">
                             <thead>
                              <tr>
                               <th class="actionth"></th>
                               <th>Month</th>
                               <th>Savings</th>
                              </tr>
                             </thead>
                               <tbody class="tbody-panel3">
                                    <tr>
                                        <td id="" class="clicabletd plusicon" target="step2-1"></td>
                                         <td>data 1a</td>
                                        <td>data 1b</td>
                                    </tr>
              ...

CSS

table{ background-color: red}

JavaScript

$(document).ready(function() {
    //var table0 = $('#tablesteps').DataTable({});
    //var table1 = $('#exampleTable2').DataTable();
    //var table2 = $('#exampleTable3').DataTable();
    $('#main_datatable').DataTable();
    $('#step1_datatable1').DataTable();
    $('#step1_datatable2').DataTable();
    $('#step2_datatable1').DataTable();
    $('#step2_datatable2').DataTable();
});
$(document).ready(function() {
   /* var table = $('#steptbl').DataTable({
        "paging":   true,
        "ordering": true,
        "info":     false,
        "searching": true,
        });*/
});


jQuery(function() {
  jQuery('.clicabletd').click(function() {
    //jQuery('.targetDiv').hide();
    jQuery('#trPanelstep' + $(this).attr('target')).toggleClass('trPanel-active');
    //jQuery('.clicabletd').classToggle('minusicon');
    //$(this).parent().parent().find('.trPanel-active').slideToggle();
    //jquery(this).parent
    //var clicks = $(this).parents('tr').next('tr').hasClass('trPanel-active');
    //alert('Correct! You guessed it in ' + clicks + ' clicks.');
     if ($(this).parents().next('tr').hasClass('trPanel-active')) {
            jQuery(this).removeClass('plusicon');
            jQuery(this).addClass('minusicon');
         } else {
            jQuery(this).removeClass('minusicon');
            jQuery(this).addClass('plusicon');
         }
      });

});