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">
    
</div>

CSS

.edit-txt{
    color:orange;
    cursor:pointer;
    
}

JavaScript

$(document).on("click","#edit",function(){
    if(!$(this).hasClass("toggle")){
        $(this).addClass("toggle");
        $("#lists li").addClass("edit-txt");
        $("#lists").sortable();
        
    }
    else{
        $("#lists").sortable("destroy");
        $("#lists li").removeClass("edit-txt");
    }
});
$(document).on("click","#lists li", function(){
    if( $("#edit").hasClass("toggle") ) {
        $