I found a solution without restructuring the elements:

I used class selector (".navbar-collapse") as the data-target, it worked fine but I faced the same issue with the toggle button. Namely the "collapsed" class was not removed - the script could not find the trigger element when multiple targets were specified.

According to the source code on GitHub they lookup for the trigger element as the following:

this.$trigger = $('[data-toggle="collapse"][href="#' + element.id + '"],' +
                  '[data-toggle="collapse"][data-target="#' + element.id + '"]')

Obviously it won't work if we use a coma separated list of element IDs or class selector in the data-target property. It will iterate through all elements, but won't find the matching trigger button. Luckily there is a trick I just found. The trigger selector checks both the data-target and the href attributes (using OR logical operator), so we can cheat it by adding a href attribute to the the toggle button, pointing to one of the existing IDs (#navbar OR #userPanel) in my sample code I used the first one:

So the solution without restructuring is:

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" href="#navbar" aria-expanded="false" aria-controls="navbar,userPanel">
    ...
</button>

Only changing the trigger button's attributes, the rest of the code remains the same.

wrap both in a div with a id and use class for both data's as given code try using data-parent to collapse both , and let me know is it working for you,

<div id="wraper"> 
   <div id="mainNav">
      <nav class="navbar navbar-inverse">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-parent="#wraper" data-target=".navbar_collapsed_data" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar top-bar"></span>
                <span class="icon-bar middle-bar"></span>
                <span class="icon-bar bottom-bar"></span>
            </button>
        </div>

        <div class="navbar_collapsed_data navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="#">
                        <span class="navicon glyphicon glyphicon-th" aria-hidden="true"></span>
                        <span class="navtext">Dashboard</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="navicon glyphicon glyphicon-fire" aria-hidden="true"></span>
                        <span class="navtext">About</span>
                    </a>
                </li>
            </ul>
        </div>
      </nav>
    </div>

<div class="navbar_collapsed_data navbar-collapse collapse">
    <ul>
        <li>Max Muster | 101945</li>
        <li><a href="#"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> Logout</a></li>
    </ul>
  </div>

Now I have made a small restructuring and wrapped the collapse elements in one container. In my case it works:

<nav class="navbar navbar-inverse">
   <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-target="#collapseArea" data-toggle="collapse" aria-expanded="false" aria-controls="navbar">
       ...
      </button>
   </div>

   <div id="collapseArea" class="navbar-collapse collapse">
       <ul id="mainNav" class="nav navbar-nav">
          <li>...</li>
          <li>...</li>
       </ul>

       <div id="userPanel">
           <ul>
               <li>...</li>
               <li>...</li>
           </ul>
       </div>
   </div>
</nav>