JSFiddle - React, Tailwind, and code Playground

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;');
     $(this).siblings('.edit-section').selectText();

 });

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

 });

 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);
     }
 };