Jquery different custom "right-click" menus according to pressed tab

Question

I have made a custom right-click menu, that shows on right click, above div called "demo-container". Everything works but I have need for something more complicated. Precisely I need different custom menu to show up above demo-container each time you press different tab. So the default behaviour and on press of tab "Step 1" it would show menu with class "custom-menu1" above "demo-container" , on press of tab "Step 2" it would show menu with class "custom-menu2" above "demo-container", on press of tab "Step 3" it would show menu with class "custom-menu3" above "demo-container"....etc..

I tried something with .click but I failed it.

You can see and edit example with that one custom right-click menu in my jsfiddle: http://jsfiddle.net/dzorz/dfCkR/

html:

    <div id="tabs" class="pull-right">    
    <ul class="nav nav-tabs">
        <li class="active"><a href="#add-step1" data-toggle="tab">Step 1</a></li>
        <li><a href="#add-step2" data-toggle="tab">Step 2</a></li>
        <li><a href="#add-step3" data-toggle="tab">Step 3</a></li>
        <li><a href="#add-step4" data-toggle="tab">Step 4</a></li>
    </ul>
    <ul class="tab-content">
        <li class="tab-pane fade in active" id="add-step1">
            First
        </li>
        <li class="tab-pane fade in" id="add-step2">
             Second
        </li>
        <li class="tab-pane fade in" id="add-step3">
            Third
        </li>
        <li class="tab-pane fade in" id="add-step4">
            Fourth
        </li>
     </ul>
</div>


<div id="demo-container" class="demo-container pull-left">
Duis sed accumsan mi. Integer dapibus viverra sapien, vel tempor libero     
ornare vel. Maecenas sit amet urna pretium, hendrerit arcu non, 
fermentum erat. Aliquam leo massa, varius vel hendrerit a, tempus eget 
lacus. Aliquam non dui orci.
</div>

<div class='custom-menu dropdown-menu'>
<button id="copy_1" class="btn btn-primary">Title 1</button>
<button id="copy_2" class="btn btn-primary">Title 2</button>
<br>
<button id="copy_name1" class="btn btn-primary">Name</button>
</div>

<div class='custom-menu2 dropdown-menu'>
<button id="copy_3" class="btn btn-primary">Title 3</button>
<button id="copy_4" class="btn btn-primary">Title 4</button>
<br>
<button id="copy_name2" class="btn btn-primary">Name</button>
</div>

<div class='custom-menu3 dropdown-menu'>
<button id="copy_5" class="btn btn-primary">Title 5</button>
<button id="copy_6" class="btn btn-primary">Title 6</button>
<br>
<button id="copy_name3" class="btn btn-primary">Name</button>
</div>

<div class='custom-menu4 dropdown-menu'>
<button id="copy_7" class="btn btn-primary">Title 5</button>
<button id="copy_8" class="btn btn-primary">Title 6</button>
<br>
<button id="copy_name4" class="btn btn-primary">Name</button>
</div>

script:

    //1st rightclick menu
$('#demo-container').bind("contextmenu", function (event) {
    event.preventDefault();
    $("div.custom-menu").show();
    $(".custom-menu").appendTo("body").css({
        top: event.pageY + "px",
        left: event.pageX + "px"
    });
}).bind("click", function (event) {
    if (!$(event.target).is(".custom-menu")) {
        $("div.custom-menu").hide();
    }
});

css:

    .custom-menu {
z-index:1000;
position: absolute;
padding: 2px;
}
.custom-menu > .btn {
margin: 2px 0px 2px 0px!important;
}

#demo-container{
width:250px;   
}

Is something like that even possible? Please help me because I'm lost, I tried to solve it in several way but I'm nooby about jQuery so I don't know how...

Can it be solved somewhat different? Anything is acceptable

Thank you

Answer 1

if you change your jquery to the following it should apply the correct right click:

function showMenu(step) {
    var menu = $("div.custom-menu" + step);
    $('#demo-container').bind("contextmenu", function (event) {
        event.preventDefault();
        menu.appendTo("body").css({
            top: event.pageY + "px",
            left: event.pageX + "px"
        }).show();
    }).bind("click", function (event) {
        if (!$(event.target).is(".custom-menu" + step)) {
            menu.hide();
        }
    });
}

$('.nav a').on('click', function() {
    $('.dropdown-menu').hide();
    var step = $(this).attr('href').substr(9);
    showMenu(step);
});

showMenu(1);

Please note that the custom menu class number has to match the step number

Example