jquery addon function not adding element to DOM in nw.js inside w2ui panel - nw.js

Question

I created this in fiddle to show what I'm trying to do in nw.js. This works just fine. 2 tabs get created dynamically at run-time just fine.
http://jsfiddle.net/fnbqupf4/
I port this over to my nw.js and I get an error when ace.edit() is called saying it can't find the element ID. When I look at the DOM in nw.js I see the tab and the editor is NOT created there. So the issue is the tab and editor div get created in the jsFiddle but not in the nw.js site.
Is there something with not being able to dynamically add elements to the DOM in nw.js?
$.fn.addEditorTab = function(name, tabName, contents) {
console.log("1");
$('ul', this).append('<li title="' + name + '">' + tabName + '<span class="ui-icon ui-icon-close" role="presentation"></li>');
$(this).append("<div id='tab-" + name + "'><div id='editor-" + name + "' class='editor'></div></div>");
$(this).tabs("refresh");
console.log("2");
var editor = ace.edit("editor-" + name);
console.log("3");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/lua");
editor.setOptions({
maxLines: Infinity
});
editor.getSession().setValue(contents);
return editor;
};
[EDIT]
After some more messing around it seems it's only an issue when I have the tabs div inside a panel in w2ui.
$('#layout').w2layout({
name: 'layout',
panels: [
{ type: 'top', size: 50, style: pstyle, content: 'top', resizable: true },
{ type: 'left', size: 300, style: pstyle, content: '<div id="sidebar" style="height: 100%; width: 100%;"></div>', resizable: true }
//{ type: 'main', style: pstyle, content: '<div id="editor"></div>' }
{ type: 'main', style: pstyle, content: '<div id="tabs"><ul></ul></div>' }
]
});