JSFiddle - React, Tailwind, and code Playground

by vishwanatharondekar

HTML

<div class="edit-section">Hello</div>
  <a href='#'class="edit">Edit</a>
<button type="submit"style="display:none;" class="done">Done</button>

JavaScript

$('.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;');
           selectElementContents($(this).siblings('.edit-section')[0]);
    
        });

 $('.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;');
       
        
    });

function selectElementContents(el) {
    var range = document.createRange();
    range.selectNodeContents(el);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
}