Why won't slicknav engage on my jquery object with an ID set by a variable?

Question

I am trying to activate slicknav on a jquery object I build on the fly.

This works lovely:

(function($){

var mobilemenu={
     slicknavEngage: function(){
         $(mobileMenuIdentifier).slicknav();
     }
}

var rebuildmenu={

    start:function(){
        var $menuParent = //some stuff I need to build menu
            $menuCategories = //more stuff I need for new menu
            $newMenu = $('<div>').attr('id','new-menu'); //my new menu object

            $menuCategories.each(function(i){
                 //build my new menu
            });

        $newMenu.appendTo('body');
        mobilemenu.slicknavEngage();
    }   

}

$(document).ready(rebuildmenu.start);

})(jQuery);

But I want to be able to set the mobile menu identifier as a config variable at the top of the closure like this, unfortunately it doesn't work, but I have ran console.log from many positions and the proper variable is always shown, why is it not working this way?? This is just a small portion of the script, as many other config variables have to be set so I want to be able to set this one also. What could be wrong?

 (function($){

    //global to this closure
    var     mobileMenuIdentifier = '#new-menu';


    var mobilemenu={
         slicknavEngage: function(){
             $(mobileMenuIdentifier).slicknav();
         }
    }

    var rebuildmenu={

        start:function(){
            var $menuParent = //some stuff I need to build menu
                $menuCategories = //more stuff I need for new menu
                $newMenu = $('<div>').attr('id',mobileMenuIdentifier); //my new menu object with the id set by variable - doesn't work!

                $menuCategories.each(function(i){
                     //build my new menu
                });

            $newMenu.appendTo('body');
            mobilemenu.slicknavEngage();
        }   

    }

    $(document).ready(rebuildmenu.start);

    })(jQuery);

Answer 1

mobileMenuIdentifier contains the CSS selector #new-menu. If you set the ID, you don't want the # to be part of the ID value. With minimal changes do your code, you could do

$('<div>').attr('id',mobileMenuIdentifier.substr(1)); // "new-menu", not "#new-menu"