JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <table>
    	<tr class="information">
    		<td>Display Name</td>
    		<td>Ahmad</td>
            <td>
            	<a class="editTrigger" href="#">Edit</a>
            </td>
    	</tr>
    	<tr class="detail">

    	</tr>


    	<tr class="information">
    		<td>Email Address</td>
    		<td>Ahmad</td>
            <td>
            	<a class="editTrigger" href="#">Edit</a>
            </td>
    	</tr>
    	<tr class="detail">
            <td colspan="3">
                <input type="email" name="email" id="email" value="Email Address">
                <ul>
                    <li>
                        <button type="button" class="saveTrigger">Save</button>
                    </li>
                    <li>
                        <button type="button" class="cancelTrigger">Cancel</button>
                    </li>
                </ul>
            </td>
    	</tr>


    	<tr class="information">
    		<td>Password</td>
    		<td>. . . . . . . . </td>
            <td>
            	<a class="editTrigger" href="#">Edit</a>
            </td>
    	</tr>
    	<tr class="detail">
            <td colspan="3">
                <input type="password" name="cur_password" id="cur_password" placeholder="Current password">
                <input type="password" name="new_password" id="new_password" placeholder="New password">
                <input type="password" name="confirm_new_password" id="confirm_new_password" placeholder="Repeat new password">
                <ul>
                    <li>
                        <button type="button" class="saveTrigger">Save</button>
                    </li>
                    <li>
                        <button type="button" class="cancelTrigger">Cancel</button>
                    </li>
                </ul>
            </td>
    	</tr>

    </table>
</form>

JavaScript

function resetState() {
    $(".detail").hide();                     // close all details
    $(".information").show();                // show all headers
};
resetState();

$(".editTrigger").click(function() {
    resetState();
    $(this).parents("tr").hide();            // hide current header
    $(this).parents("tr").next("tr").show(); // show current detail
});