JSFiddle - React, Tailwind, and code Playground

by eapo

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="selected">selected</div>
<hr />
<div id="level1">
  <div id="level2">
    <div id="level3">
      <div id="first">1st</div>
      <div id="second">2nd</div>
      <div id="third">3rd</div>
      <div>4rt</div>
    </div>
  </div>
  <div>
    <div></div>
  </div>
</div>

CSS

body * {border:1px solid}

div {
  min-height: 20px;
  border: 1px solid;
  margin: 10px;
}

JavaScript

$( function() {
    $("body").prepend('<div id="dialog" title="Modding options" style="background-color:#fff"><ul><li><label><input type="radio" name="todo" value="remove" />remove</label></li><li><label><input type="radio" name="todo" value="hide" />hide</label></li><li><label><input type="radio" name="todo" value="clone" />clone</label></li></ul></div>');
    $("body").append('<div id="container">container<br /></div><div id="status">asd</div>');
    $( "#dialog" ).dialog();

  document.body.addEventListener("mousemove",function(e){
    // clear "hovered" class
    var elems = document.getElementsByClassName("hovered");
    for(var a=elems.length-1; a>=0; a--){elems[a].style.boxShadow = null;elems[a].classList.remove("hovered");}

    //add "hovered" class to target
    e.target.style.boxShadow = 'inset 0 0 5px red';
    e.target.classList.add("hovered");
  });
});

$("body").on("change", "input[name='todo']", function(event){
 var text;
switch($(this).val()) {
      case "remove":
			  $("html").on('click', '.hovered', function(e) {
          text = $(this).html()+" removed";
          $(this).remove();
        });
        break;
      case "hide":
			  $("html").on('click', '.hovered', function(e) {
          $(this).hide();
        });
    		break;
      case "clone":
			  $("html").on('click', '.hovered', function(e) {
  					$('#container').append($(this).clone());
        });
    		break;
      default:
    		text = "hmm..";
    		break;
  }
	console.log(text);
 });