JSFiddle - React, Tailwind, and code Playground

by Cerlin ST

HTML

<form>
    <table>
        <tr>
            <td>
                Some bla
            </td>
            <td>
                <a class="edit">Edit </a>
                <a class="save" style="display:none">Save </a>
                    <input type="text" name="input" id="idNumb" style="display:none;" /><a class="cancel" style="display:none">Cancel</a>
            </td>
        </tr>
        <tr>
            <td>
                Some bla
            </td>
            <td>
                <a class="edit">Edit </a>
                <a class="save" style="display:none">Save </a>
                    <input type="text" name="input" id="idNumb" style="display:none;" /><a class="cancel" style="display:none">Cancel</a>
            </td>
        </tr>
        <tr>
            <td>
                Some bla
            </td>
            <td>
                <a class="edit">Edit </a>
                <a class="save" style="display:none">Save </a>
                    <input type="text" name="input" id="idNumb" style="display:none;" /><a class="cancel" style="display:none">Cancel</a>
            </td>
        </tr>
        <tr>
            <td>
                Some bla
            </td>
            <td>
                <a class="edit">Edit </a>
                <a class="save" style="display:none">Save </a>
                    <input type="text" name="input" id="idNumb" style="display:none;" /><a class="cancel" style="display:none">Cancel</a>
            </td>
        </tr>
        <tr>
            <td>
                Some bla
            </td>
            <td>
                <a class="edit">Edit </a>
                <a class="save" style="display:none">Save </a>
                    <input type="text" name="input" id="idNumb" style="display:none;" /><a class="cancel" style="display:none">Cancel</a>
            </td>
        </tr>
        <tr>
            <td>
                Some bla
            </td>
            <td>
                <a class="edit">Edit </a>
                <a...

CSS

a {
    text-decoration:underline;
    color:red;
}

JavaScript

$('.edit').click(function (e) {
    e.preventDefault();
    $this = $(this);
    $this.hide();
    $this.next().show().next().show().next().show();
})

$('.save').click(function (e) {
    e.preventDefault();
    $this = $(this);
    alert($this.next().val());
    $this.hide();
    $this.prev().show();
    $this.next().hide();
})

$('.cancel').click(function(e){
	e.preventDefault();
	$(this).hide().prev().hide().prev().hide().prev().show();
})