JSFiddle - React, Tailwind, and code Playground

by shriek

HTML

<a href="javascript:void(0)" id="edit">Edit</a>
<ul id="lists">
    <li><a href="google.com">Google</a></li>
	<li><a href="hp.com">hp</a></li>
	<li><a href="microsoft.com">Microsoft</a> </li>
	<li><a href="apple.com">Apple</a> </li>
</ul>
<div id="popup">
    <label> Text </label><input type="text" name="text" value=""/>
    <label> Link </label><input type="text" name="link" value=""/>
    <input type="button" value="Save"/>
</div>

CSS

.edit-txt{
    color:orange;
    cursor:pointer;
    
}
#lists li {
    background-color:#ccc;
    margin-bottom:2px;
    width:40%;
}
#popup{
    display:none;
}

JavaScript

$(document).on("click","#edit",function(){
    if(!$(this).hasClass("toggle")){
        $(this).addClass("toggle");
        $("#lists li").addClass("edit-txt");
//        $("#lists li a").attr("href", "javascript:void(0);");
        $("#lists").sortable({"axis":"y"});    
    }
    else{
        $("#lists").sortable("destroy");
        $("#lists li").removeClass("edit-txt");
        $(this).removeClass("toggle");
    }
});
$(document).on("click","#lists li a", function(e){
    var parent = $(this);
    if( $("#edit").hasClass("toggle") ) {
        e.preventDefault();
        $("#popup").dialog();
        $("#popup input[name='text']").attr("value",$(this).text());
        $("#popup input[name='link']").attr("value",$(this).attr("href"));
        $("#popup input[value='Save']").on("click",function(){
            $(parent).text($("#popup input[name='text']").val());
            $(parent).attr("href",$("#popup input[name='link']").val());
        });
    }
});