Issue when having two navigation Menus on same page

When there are two horizontal navigation menus on a page, One as a "Main" navigation menu and the other as a "submenu under currently opened page" and they are being viewed on a small device so both menu bars are collapsed,  both navigation menus point to data-target="#bs-example-navbar-collapse-1". This causes only the first navigation menu to collapse even if the second collapse button is pressed. 

attached are images.  how do i fix this?