Facing Issue with selectmenu

Facing Issue with selectmenu

I have fighting with this issue for a while. Dynamically creating a selectmenu object, displays strangely on both android and wp8. It shows up with two boxes - one inside another, with two select icons (attached screenshot). You can select from both the boxes and it ends up displaying separate values. Code snippet below:
//-----------------------------------------------------------------------
var l = document.createElement("select");
l.id  = "alist";
l.setAttribute("data-native-menu","true");
l.setAttribute("data-mini","true");
l.className = "select";
l.setAttribute("data-filter","true");
      //First list option
var listOption = new Option();
listOption.text = "desc1";
                listOption.label = "desc1"
listOption.value="1";

if(isIE()){
elem.add(listOption);
}else{
elem.add(listOption,null);
}
            //Second option
var listOption = new Option();
listOption.text = "desc2";
                listOption.label = "desc2"
listOption.value="2";

if(isIE()){
l.add(listOption);
}else{
l.add(listOption,null);
}
       //parentElem = element of container div

  parentElem.className="ui-field-contain";
        parentElem.appendChild(l);

return l;
//-----------------------------------------------------
//Initiator
$(".select").selectmenu({hidePlaceholderMenuItems: true,preventFocusZoom: true}).on('selectmenuchange',function() {closeSelectMenu(this);});

//-------------------------------------------------------------------
Any help appreciated