JSFiddle - React, Tailwind, and code Playground

by manishie

HTML

<form id="theform">
    <div>
        <div class="first editable">First Name</div>
        <div class="last editable">Last Name</div>
    
    
        <div class="edit">edit</div>
        <div class="save" style="display:none;">save</div>
        <div class="cancel" style="display:none;">cancel</div>
    </div>
</form>

JavaScript

$('.edit').click(function() {
    $('.edit').hide();
    $('.save,.cancel').show();
    
    $('.editable').each(function(index, el) {
        $(el).attr('data-orig', $(el).html());           
        $(el).html('<input type="text" value="' + $(el).attr('data-orig') + '">');
    });
});    

$('.save').click(function() {
    $('.edit').show();
    $('.save,.cancel').hide();

      $('.editable').each(function(index, el) {
        $(el).attr('data-orig', '');   
        $(el).html($(el).find('input').val());
    });            
});

$('.cancel').click(function() {
    $('.edit').show();
    $('.save,.cancel').hide();

      $('.editable').each(function(index, el) {
        $(el).html($(el).attr('data-orig'));
        $(el).attr('data-orig', '');   
    });            
});