Using 2 bootstrap's dropdowns independently

Question

I have two bootstrap's dropdowns into the same container. When I open one, the other is closing automatically. How could I enable both to be open in the same time?

see demo here: https://jsfiddle.net/wdxbqvxz/1/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div class="container-fluid">
    <div class="row">
        <dl class="dl-horizontal">  
            <dt> 
                <div class="dropdown"> 
                    <button type="button" class="btn btn-default btn-block dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Le panneau latéral <span class="caret"></span></button>  
                    <ul class="dropdown-menu" style="position:relative; border:0;" role="menu">  
                        <li><button type="button" value="panelRecherche" class="btn btn-default btn-xs btn-block startTour" role="menuitem" data-dismiss="modal">L 'outil de recherche</button></li>  
                        <li><button type="button" value="panelControle" class="btn btn-default btn-xs btn-block startTour" role="menuitem" data-dismiss="modal">Le contrôle de couche</button></li>  
                        <li><button type="button" value="panelInfo" class="btn btn-default btn-xs btn-block startTour" role="menuitem" data-dismiss="modal">L 'outil Info</button></li>  
                        <li><button type="button" value="panelDessin" class="btn btn-default btn-xs btn-block startTour" role="menuitem" data-dismiss="modal">Les dessins</button></li>  
                        <li><button type="button" value="panelCES" class="btn btn-default btn-xs btn-block startTour" role="menuitem" data-dismiss="modal">Les CES</button></li>  
                        <li><button type="button" value="panelLegende" class="btn btn-default btn-xs btn-block startTour" role="menuitem" data-dismiss="modal">La légende</button></li>  
                    </ul>  
                </div>  
            </dt>  
            <dd>Le panneau latéral est composé de différentes sections dynamiques qui se mettent à jour automatiquement en fonction des objets sélectionnés dans la carte. Ces sections sont : l 'outil de recherche qui permet de localiser un objet géographique en particulier, le contrôle de couche, l 'outil Info, le panneau de dessin, le panneau des CES, et la légende de la carte.</dd>  
        </dl>  
    </div>  
    <div class="row">  
        <dl class="dl-horizontal">  
            <dt> 
                <div class="dropdown"> 
                    <button type="button" class="btn btn-default btn-block dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Le panneau inférieur <span class="caret"></span></button>  
                    <ul class="dropdown-menu" style="position:relative; border:0;" role="menu">  
                        <li><button type="button" value="panelDonnees" class="btn btn-default btn-xs btn-block startTour" role="menuitem" data-dismiss="modal">Les données</button></li>  
                        <li><button type="button" value="panelDesc" class="btn btn-default btn-xs btn-block startTour" role="menuitem" data-dismiss="modal">Les descriptions</button></li>  
                    </ul>  
                </div>  
            </dt>  
            <dd>Le panneau inférieur est composé des tableaux de données (Données et Sélection) ainsi que du panneau Descriptions où les descriptions techniques doivent être saisies pour chaque CES.</dd>  
        </dl>  
    </div>  
</div>