JSFiddle - React, Tailwind, and code Playground

by Gaurav Singh

HTML

<div class="edit-section">Hello</div> <a href='#' class="edit">Edit</a>

<button type="submit" style="display:none;" class="done">Done</button>

JavaScript

jQuery.fn.selectText = function () {
    var doc = document;
    var element = this[0];
    console.log(this, element);
    if (doc.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }
};

$(".edit").click(function () {
    $(".edit-section").selectText();
});



$('.edit').click(function () {
    $(this).siblings('.edit-section').attr('contenteditable', 'true');
    $(this).siblings('.edit-section').attr('style', 'border:2px solid;');
    $(this).attr('style', 'display:none;');
    $(this).siblings('.done').attr('style', 'display:li;');


});

$('.done').click(function () {
    $(this).siblings('.edit-section').attr('contenteditable', 'false');
    $(this).siblings('.edit-section').attr('style', 'border:none;');
    $(this).attr('style', 'display:none;');
    $(this).siblings('.edit').attr('style', 'display:li;');

});