How to add something into the burger (mobile) menu on the fly?

I have 2 menus . One is main menu and the second one is secondary menu. On mobile, the enfold burger menu only shows the menu items from the main menu. I want to hide the secondary menu on mobile and append all the menu items from secondary menu to the burger menu.

I tried to add the following javascript to the header:

<script type=”text/javascript”>
jQuery(document).ready(function() {
var updatedMobileMenu = false;
jQuery(‘span.av-hamburger’).on(‘click’, function(){
if (jQuery(‘span.av-hamburger’).hasClass(‘is-active’)){
// nothing to do
} else {
setTimeout(function(){
if (updatedMobileMenu == false){
var topMenu = jQuery(‘#avia2-menu’).clone();
jQuery(‘#av-burger-menu-ul’).append(jQuery(topMenu).children());
updatedMobileMenu = true;
}
}, 500);
}
});
});
</script>

It appends the secondary menu items to the burger menu successfully. However, the style is completely difference from other menu items on the burger menu. I found that the burger menu item structure is completely difference and I can’t directly clone and append them. Is there any javascript function which I can use to create mobile menu items on the fly?

Thanks,
Alex