JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tools">
<div class="widgets">
Widget1
</div>
<div class="widgets">
Widget2
</div>
</div>
<div id="newnode"></div>

<div id="body">
 
</div>

CSS

#tools > .widgets
{
  display: block;
  border: 1px solid black;
}

#tools {
  width: 20%;
  display: inline-block;
}

#body {
  display:inline-block;
  vertical-align: top;
  border: 1px dashed black;
  width: 75%;
  height: 200px;
}

#newnode {
    position: absolute;
    z-index: 100000;
    width: 160px;
    height: 80px;
    display: none;
    color: white;
    border-radius: 5px;
    background: silver;
}

JavaScript

$("#tools").on("mousedown touchstart", ".widgets", function(e) {
  InitialX = $(this).offset().left;
  InitialY = $(this).offset().top;
  $("#newnode").css("left", InitialX);
  $("#newnode").css("top", InitialY);
  $("#newnode").css("width", $(this).width());
  $("#newnode").css("height", $(this).height());
  $("#newnode>svg").html($($(this).find("g")[0]).clone());
  $("#newnode").show();
  e.target=$("#newnode")[0];
  $("#newnode").trigger(e);
});

$("#newnode").on("blur focus focusin focusout load resize scroll unload click " +
  "dblclick mousedown mouseup mousemove mouseover mouseout mouseenter " +
  "mouseleave change select submit keydown keypress keyup error" +
  "touchstart touchend touchmove",
  function(e) {
    console.log("newnode",e.type);
  });


$("#tools").on("blur focus focusin focusout load resize scroll unload click " +
  "dblclick mousedown mouseup mousemove mouseover mouseout mouseenter " +
  "mouseleave change select submit keydown keypress keyup error" +
  "touchstart touchend touchmove", ".widgets",
  function(e) {
    console.log("widgets",e.type);
  });