How to use jQuery ContextMenu to have 2 different menus one above the other inside a table?

Question

Using jQuery ContextMenu plugin or pure Javascript, is it possible to use 2 different context menu (first on parent and the second on the child element)?

In my snippet I would like to open the first menu only on right click (on the table row) and open the second menu only on left click of the button (inside my row).

I set trigger: 'left' only for the button however when I left click on it both menus are shown as you see here:

$(function() {
    $.contextMenu({
        selector: '.context-menu-one', 
        callback: function(key, options) {
            var m = "clicked: " + key;
            window.console && console.log(m) || alert(m); 
        },
        items: {
            "edit": {name: "Edit", icon: "edit"},
            "cut": {name: "Cut", icon: "cut"},
           copy: {name: "Copy", icon: "copy"},
            "paste": {name: "Paste", icon: "paste"},
            "delete": {name: "Delete", icon: "delete"},
            "sep1": "---------",
            "quit": {name: "Quit", icon: function(){
                return 'context-menu-icon context-menu-icon-quit';
            }}
        }
    });
    
    $.contextMenu({
        selector: '.context-menu-two', 
              trigger: 'left',
        items: {
            "new": {name: "New", icon: "new"},
            "open": {name: "Open", icon: "open"}
        }
    });  
});

table{width:300px;height:100px}
tr {background:#222;color:#fff}

<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet"/>
<link href="https://www.jqueryscript.net/demo/Feature-rich-Custom-jQuery-Context-Menu-Plugin-contextMenu/dist/jquery.contextMenu.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Feature-rich-Custom-jQuery-Context-Menu-Plugin-contextMenu/dist/jquery.ui.position.js"></script>
<script src="https://www.jqueryscript.net/demo/Feature-rich-Custom-jQuery-Context-Menu-Plugin-contextMenu/dist/jquery.contextMenu.js"></script>
<table>
    <tbody>
        <tr role="row" class="context-menu-one">
            <td>
                <button class="context-menu-two">Left click</button>
            </td>
        </tr>
    </tbody>
</table>

Is there a method to prevent the first menu to be shown when I click on the button?

1st UPDATE

Based on Aswin Kumar answer, the two menus are displayed correctly individually but, as you can see from my gif below, if you try to:

1. click the button
2. move the mouse on hover the menu
3. move the mouse outside the menu
4. close the menu clicking the left mouse button

In this case the user is not able to close the menu (4th point). Is there a work around for close the menu on left click outside the menu?

Answer 1

Using contextMenu's show event (cancellable) and jquery's hasClass to verify the target element. Along with the help of z-index

UPDATE

4.close the menu clicking the left mouse button (fixed)

$(function() {

  $(document).on('mousedown', function(e) {
      $('.context-menu-one').contextMenu('hide');
      $('.context-menu-two').contextMenu('hide');
      e.preventDefault();
      e.stopImmediatePropagation();
  });

  $.contextMenu({
    selector: '.context-menu-one',
    callback: function(key, options) {
      var m = "clicked: " + key;
      window.console && console.log(m) || alert(m);
    },
    events: {
      show: function() {
        if ($(event.target).hasClass('context-menu-two')) {
          return false
        }
        $('.context-menu-two').first().contextMenu('hide');
      }
    },
    autoHide: true,
    items: {
      "edit": {
        name: "Edit",
        icon: "edit"
      },
      "cut": {
        name: "Cut",
        icon: "cut"
      },
      copy: {
        name: "Copy",
        icon: "copy"
      },
      "paste": {
        name: "Paste",
        icon: "paste"
      },
      "delete": {
        name: "Delete",
        icon: "delete"
      },
      "sep1": "---------",
      "quit": {
        name: "Quit",
        icon: function() {
          return 'context-menu-icon context-menu-icon-quit';
        }
      }
    }
  });

  $.contextMenu({
    selector: '.context-menu-two',
    trigger: 'left',
    autoHide: true,
    items: {
      "new": {
        name: "New",
        icon: "new"
      },
      "open": {
        name: "Open",
        icon: "open"
      }
    }
  });
});

table {
  width: 300px;
  height: 100px
}

tr {
  background: #222;
  color: #fff
}

.context-menu-two {
  position: relative;
  z-index: 2;
}

.context-menu-root {
  z-index: 3!important;
}

<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" />
<link href="https://www.jqueryscript.net/demo/Feature-rich-Custom-jQuery-Context-Menu-Plugin-contextMenu/dist/jquery.contextMenu.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Feature-rich-Custom-jQuery-Context-Menu-Plugin-contextMenu/dist/jquery.ui.position.js"></script>
<script src="https://www.jqueryscript.net/demo/Feature-rich-Custom-jQuery-Context-Menu-Plugin-contextMenu/dist/jquery.contextMenu.js"></script>
<table>
  <tbody>
    <tr role="row" class="context-menu-one">
      <td>
        <button class="context-menu-two">Left click</button>
      </td>
    </tr>
  </tbody>
</table>