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

Using jQuery ContextMenu plugin is it possible to use a menu inside another?

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>

I want to show both menus however is there a method to prevent the first menu to be shown when I click on the button?

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