JSFiddle - React, Tailwind, and code Playground

by Teuta Koraqi

HTML

<a href="index.html" data-role="button" id="Click">DropDown</a>
<a href="#"  data-role="button" id="Drop">Click Here</a>
<div id="container">
<div id="fixed">
     <ul>
       <li>
          <a href="#" name="test1">test1 </a>
          <input type="text" value="test1">
          <span class="edit-icon">Edit</span>
       </li>
       <li>
             <a href="#" name="test2">test2</a>
       </li>
       <li>
             <a href="#" name="test2">test2</a>
       </li>
     </ul>
 
</div>
</div>

CSS

#fixed{
    display:table;
    position:fixed;
    width:46%;
    height:46%;
    top:25%;
    left:25%;
    background:#fefefe;
    border:5px solid grey;
    border-radius:10px;
    padding:2%;
    z-index:2;
}
#container{
    position:fixed;
    width:100%;
    height:100%;
    background:#000;
    opacity:0.5;
    top:0;
    display:none;
}

.edit-icon {
  opacity: 0;
  position: absolute;
  right: 0;
  display: inline-block;
  top: 11px;
}

#fixed li:hover .edit-icon {
  opacity: 1;
}

#fixed a{
    display:inline-block;
    text-align:center;
    width: 100%;
    padding: 10px 0;
    position: relative;
}

#fixed .editable a {
  display: none;
}

#fixed input {
  display: none;
}

#fixed .editable input {
  display: inline-block;
}

#fixed li {
  position: relative;
}

JavaScript

$( "#Click" ).click(function() {
  alert( "Handler for .click() called." );
});
$( "#Drop" ).click(function() {
  $("#container").show();
});

/* $( "#container" ).click(function(e) {
  $("#container" ).hide();
}); */

$( "#fixed a" ).click(function(e) {
  document.getElementById('Drop').innerHTML=this.name;
});

$(".edit-icon").on("click", function(){
 var editItem = $(this).parent();  
 editItem.addClass("editable");
 editItem.attr('contenteditable','true');
})