how to open table tr inside tr on click

Question

I have a one table and I want open same tr inside tr when click on plus icon. I don't understand which html element I use for open.

Please help me out. Thanks in advance.

<div class="procedure-table">
    <table class="table" style="border: 2px slide;">
        <thead>
            <tr>
                <th>Procedure Name</th>
                <th>Cost</th>
                <th>Taxes</th>
                <th>Notes</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="proce-td">
                    <ul>
                        <li>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting ghj industry.<span><a href="">[+]</a></span>
                            </p>
                        </li>
                    </ul>
                </td>
                <td class="cost-td">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
                <td class="taxes-td">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
                <td>
                    <div class="note-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                    <i class="material-icons close-icon2">close</i>
                    <i class="material-icons edit-icon">edit</i>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

You could use the close-icon. It should toggle from open->close->open Use jquery to fire up the event for open (appendChild or insertAfter) and close (removeChild or simply remove).

jQuery(document).ready(function() {
    jQuery("#plus").click(function() {
        $("#main").append('<tr><td>A</td><td>B</td><td>C</td><td>D</td><td></td></tr>');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="main">
<tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td><a href="#" id="plus">[+]</a></td>
</tr>
</table>