JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<table width="100%" border="1" cellpadding="3" cellspacing="0" id="myTable">
    <tr>
        <td>1</td>
        <td>Div1</td>
        <td>SD!</td>
        <td><a href="#" class="expand" id="sec1"><span class="glyphicon glyphicon-plus-sign"></span></a> Sec1</td>
        <td>526</td>
        <td>526</td>
        <td>526</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Div1</td>
        <td>SD!</td>
        <td><a href="#" class="expand" id="sec2"><span class="glyphicon glyphicon-plus-sign"></span></a> Sec2</td>
        <td>526</td>
        <td>526</td>
        <td>526</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Div1</td>
        <td>SD2</td>
        <td><a href="#" class="expand" id="sec3"><span class="glyphicon glyphicon-plus-sign"></span></a> Sec3</td>
        <td>526</td>
        <td>526</td>
        <td>526</td>
    </tr>
</table>

JavaScript

$(".expand").click(function () {
    var childIds = $(this).prop("id");
     var thisIndex = $(this).parent().index();
    $(this).children().toggleClass("glyphicon-plus-sign glyphicon-minus-sign");
    if ($(this).children().hasClass("glyphicon-minus-sign")) {
        $(this).parent().parent().after("<tr class='" + childIds + "'><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr class='" + childIds + "'><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>");
             $("#myTable tr").each(function(){
         var trow = $(this);
                 trow.children().eq(thisIndex).after(' <td><a href="#" class="expand" id="sec2"><span class="glyphicon glyphicon-plus-sign"></span></a> Sec2</td>');
        
     });
   
    }

    if ($(this).children().hasClass("glyphicon-plus-sign")) {
        $(this).parent().parent().siblings("." + childIds).remove();
                     $("#myTable tr").each(function(){
         var trow = $(this);
                 trow.children().eq(thisIndex).next().remove();
        
     });
    }
});