Как развернуть / свернуть данные строки динамической таблицы

Question

Я получаю некоторые данные из сервлета и отображаю их в Jsp в виде таблицы, используя итерации. Теперь я хочу развернуть / свернуть каждую строку индивидуально на основе элемента данных строки.Я получаю эти данные, используя ajax cal, но проблема заключается в представлении

    </script>
<script type= "text/javascript">
    $(document).ready(function(){
        $('tr.parent').css("cursor","pointer")
        .attr("title","click to expand/collapse")
        .click(function(){
            $(this).siblings('.child-'+this.id).toggle();
        });
        $('tr[@class^=child-]').hide.children('td');
    });
</script>

        <div class="container">
        <table class="table table-striped" >
            <tr>
            <th>Request ID</th>
            <th>User ID</th>
            <th>Login URL</th>
            <th>Reason</th>
        </tr>
        <c:forEach items="${Env}" var="col">
        <tr class="parent" id="env">
            <td><a class="value" data-toggle="collapse" data-target="#details" href="./envDetails?envId=${col.environmentid }"><span class="glyphicon glyphicon-collapse-down"></span>${col.environmentid }</a></td>
            <td>${col.userid }</td>
            <td>${col.loginURL }</td>
            <td>${col.reason }</td>
        </tr>
    <tr id="details" class="child-env" style="display: table-row;">
            <table>
            <tr>
                <th>Script Name</th>
                <th>Module</th>
                <th>Type</th>
                <th>Status</th>
            </tr>
            </table>
         </tr>
    </table>
    </div>

, когда когда-либо расширяете строку, она должна отображаться, как показано ниже

    <tr>
        <th>Script Name</th>
        <th>Module</th>
        <th>Type</th>
        <th>Status</th>
    </tr>