JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container ">
      
         <div class="container_settings_inner">
           <h4 class="fred"><div class="iconnameserver"></div> Test1</h4>
         </div>
         <div class="container_settings_inner">
           <h4 class="fred"><div class="iconnameserver"></div> test2</h4>
         </div>
         <div class="container_settings_inner">
           <h4 class="fred"> <div class="iconnameserver"></div>test3</h4>
         </div>
       </div>
<a href="#" id="edit">Edit</a>

CSS

div {
    margin: 20px 0;
}

textarea {
    width: 100%;
}

JavaScript

$(document).ready(function() {
    $("#edit").click(function()
    {
      
           $('.container_settings_inner').attr('contentEditable','true');
    });
});