JSFiddle - React, Tailwind, and code Playground

by Ahmad Sharif

HTML

<form class="skylarkForm userInfoEdit" method="post" action="javascript:void(0)">
    <table class="table">
        <tr>
            <td>Display Name</td>
            <td class="displayInfoTd"> <span id="fname_span"> Ahmad </span>

            </td>
            <td class="editInfoTd">
                <input type="text" name="fname" id="fname" value="Ahmad">
                <ul class="margin-top-10">
                    <li>
                        <button type="button" id="fname_save" name="fname_save" class="skylarkSmallBtn saveTrigger"><i class="fa fa-check font-size-10"></i> Save</button>
                    </li>
                    <li>
                        <button type="submit" class="skylarkSmallBtn white cancelTrigger"><i class="fa fa-close"></i> Cancel</button>
                    </li>
                </ul>
            </td>
            <td class="triggerTd"> <a href="javascript:void(0)" class="editTrigger" data-toggle="tooltip" data-placement="top" title="Edit Display Name"> <i class="fa fa-pencil font-10 margin-left-10"></i> Edit </a>

            </td>
        </tr>
        <tr>
            <td>Email Address</td>
            <td class="displayInfoTd"> <span id="email_span"> Ahmad </span>

            </td>
            <td class="editInfoTd">
                <input type="email" name="email" id="email" value="Email Address">
                <ul class="margin-top-10">
                    <li>
                        <button type="button" id="email_save" name="email_save" class="skylarkSmallBtn saveTrigger"><i class="fa fa-check font-size-10"></i> Save</button>
                    </li>
                    <li>
                        <button type="button" id="" name="" class="skylarkSmallBtn white cancelTrigger"><i class="fa fa-close"></i> Cancel</button>
                    </li>
                </ul>
            </td>
            <td class="triggerTd"> <a href="javascript:void(0)" class="editTrigger" data-toggle="tooltip" data-placement="top"...

CSS

.userInfoEdit table tr > td {
    width: 50%;
}
ul {
    margin: 0;
}
ul > li {
    list-style: none;
    display: inline-block;
}
form.skylarkForm input, form.skylarkForm select {
    display: block;
    margin-bottom: 10px;
    width: 90%;
    max-width: 400px;
}

JavaScript

$(function () {
     $('.editInfoTd').hide();
     $('a.editTrigger').click(function (event) {
         $(this).parent('td.triggerTd').siblings('td.displayInfoTd').hide(10);
         $(this).parent('td.triggerTd').siblings('.editInfoTd').show(10);
     });

     $('.saveTrigger').click(function (event) {
         $(this).closest('td.editInfoTd').hide(10);
         $(this).closest('td.editInfoTd').siblings('td.displayInfoTd').show(10);
     });


     $('.cancelTrigger').click(function (event) {
         $(this).closest('td.editInfoTd').hide(10);
         $(this).closest('td.editInfoTd').siblings('td.displayInfoTd').show(10);
     });
 });