Bootstrap 4, Using multiple dropdown buttons within nav menu items

Question

I am trying to figure out a solution to having sub menus within the menu items.I have 2 dropdown buttons (Reports and Views) within menu item that is a dropdown item itself. Whenever I click on the first button, it will display the submenu underneath but when I click on the second dropdown button, it will still display the first submenu items and not the second submenu items. I have tried to group each button using the btn-group but when I do that it breaks the buttons and when you click on the buttons, the menu just disappears. Any advice? Thanks

        <nav class="navbar navbar-expand-md Nav-colors">
        <a class="navbar-brand" href="<?php echo site_url(); ?>">
            <img src="<?php echo assetUrl('images'); ?>ups_logo.png" alt="Brand Logo">
        </a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-text Nav-colors">Menu</span>
        </button>
        <div class="collapse navbar-collapse" id="navbarContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="labourPlanningDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Labour Planning
                    </a>
                    <div class="dropdown-menu" aria-labelledby="labourPlanningDropdown">
                        <button class="dropdown-item btn dropdown-toggle Btn-ups" type="button" id="reportsDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Reports
                        </button>
                        <div class="dropdown-menu Nav-submenu-colors" aria-labelledby="reportsDropdown">
                            <a class="dropdown-item" href="#">Supervisor Daily Snapshot</a>
                            <a class="dropdown-item" href="#">Manager Daily Snapshot</a>
                            <a class="dropdown-item" href="#">Employee Productivity</a>
                            <a class="dropdown-item" href="#">Metric Export</a>
                            <a class="dropdown-item" href="#">Facility Hours/FTE</a>
                            <a class="dropdown-item" href="#">Trend Graphs</a>
                            <a class="dropdown-item" href="#">Monthly YoY Graphs</a>
                        </div>
                        <a class="dropdown-item" href="<?php echo site_url('facilityperformance'); ?>">Facility Performance</a>
                        <a class="dropdown-item" href="<?php echo site_url('weeklyexcesshours'); ?>">Weekly Excess Hours</a>
                        <a class="dropdown-item" href="<?php echo site_url('targetmar'); ?>">Target MAR</a>
                        <a class="dropdown-item" href="<?php echo site_url('unitofmeasure'); ?>">Unit of Measure</a>
                        <a class="dropdown-item" href="<?php echo site_url('monthlyplanforecast'); ?>">Monthly Plan/Forecast</a>
                        <button class="dropdown-item btn dropdown-toggle Btn-ups" type="button" id="viewsDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Views
                        </button>
                        <div class="dropdown-menu Nav-submenu-colors" aria-labelledby="viewsDropdown">
                            <a class="dropdown-item" href="#">3 Week View</a>
                            <a class="dropdown-item" href="#">1 Month View</a>
                        </div>
                        <a class="dropdown-item" href="<?php echo site_url('manualmetricinput'); ?>">Manual Metric Input</a>
                        <a class="dropdown-item" href="<?php echo site_url('clientimport'); ?>">Client Import</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="<?php echo site_url('employeemapping'); ?>">Employee Mapping</a>
                        <a class="dropdown-item" href="<?php echo site_url('activityowners'); ?>">Activity Owners</a>
                        <a class="dropdown-item" href="<?php echo site_url('planimport'); ?>">Plan Import</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Forecast</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Supervisor</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Admin</a>
                </li>
            </ul>
        </div>
        <span class="navbar-text text-right">Logged in: <?php echo $ADID; ?></span>
    </nav>

Answer 1

I notice that you have a data-toggle="dropdown" on some of your items but no data-target. If you add data-target, it should toggle the correct items.

For example your menu button has

<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-text Nav-colors">Menu</span>
</button>

It has a data-target so it opens up the correct menu, but your submenu toggles do not.