JS can't access elements from the vm file

[Martin Fischer]

Hello, I have a Jira velocity page which is supposed to define an aui-dialog2 popup window element as it is shown here https://aui.atlassian.com/aui/9.2.0/docs/dialog2.html

Then I have a JS file trying to reach the element from vm file to show the dialog as a popup window. 

JS.toInit(function () {
  AJS.$("#dialog-show-button").on('click', function(e) {
    e.preventDefault();
    AJS.dialog2("#demo-dialog").show();
  });

});

Velocity page works fine as it is a part of the webwork module but the dialog won't show up. I'm not sure how to link these two files together to make it work. I tried to put these $webResourceManager.requireResource and $webResourceManager.requireResourcesForContext commands to make it work but nothing seems to work. The JS works okay in other scenarious but can't acces the webwork module files (elements). So is there any way how to show the velocity page as a window popup after clicking any button?