JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.0/jquery.contextMenu.min.js"></script>
<p>Click on a box. (This is embedded SVG)</p>
<svg id="svg1" class="svg-class1" style="overflow-x: hidden; overflow-y: hidden; position: relative; " height="100" version="1.1" width="1280" xmlns="http://www.w3.org/2000/svg">
    <rect
        x="10"
        y="20"
        width="100"
        height="60"
        r="10"
        rx="10"            
        ry="10"
        fill="#ff0000"
        stroke="#ff0000"
        class="by-class"
        fill-opacity="0.1"
        stroke-width="2">
    </rect>

    <rect
        x="10"
        y="90"
        width="100"
        height="60"
        r="10"
        rx="10"            
        ry="10"
        fill="#0000ff"
        stroke="#0000ff"
        id="by-id"
        fill-opacity="0.1"
        stroke-width="2">
    </rect>
</svg>
<svg id="svg2" class="svg-class2" style="overflow-x: hidden; overflow-y: hidden; position: relative; " height="100" version="1.1" width="1280" xmlns="http://www.w3.org/2000/svg">
    <rect
        x="10"
        y="20"
        width="100"
        height="60"
        r="10"
        rx="10"            
        ry="10"
        fill="#ff0000"
        stroke="#ff0000"
        class="by-class"
        fill-opacity="0.1"
        stroke-width="2">
    </rect>

    <rect
        x="10"
        y="90"
        width="100"
        height="60"
        r="10"
        rx="10"            
        ry="10"
        fill="#0000ff"
        stroke="#0000ff"
        id="by-id"
        fill-opacity="0.1"
        stroke-width="2">
    </rect>
</svg>

JavaScript

$.contextMenu({
  selector: "#svg1",
  items: {
    "deleteRow": { 
      name: "menu1", 
      callback: function() {
        SIP0102.SIP0102Grid1.deleteRow({ rowIndx: SIP0102.SIP0102Grid1.SelectRow().getSelection()[0].rowIndx });
      }
    }
  },
  position: function(opt, x, y) {
    console.log("position callback:" + x + "/" + y);
    opt.$menu.css({ top: y, left: x });
  },
});
$.contextMenu({
  selector: ".svg-class2",
  items: {
    "deleteRow": { 
      name: "menu2", 
      callback: function() {
        SIP0102.SIP0102Grid1.deleteRow({ rowIndx: SIP0102.SIP0102Grid1.SelectRow().getSelection()[0].rowIndx });
      }
    }
  },
  position: function(opt, x, y) {
    console.log("position callback:" + x + "/" + y);
    opt.$menu.css({ top: y, left: x });
  },
});


// See http://jsfiddle.net/rodneyrehm/cm9Gv/ for jQuery 1.7 where this doesn't work