Bootstrap mixed dropdown toggle

Question

i have 2 dropdown on 1 page, 1 for logout and 1 for chart. the problem is whatever button i pressed dropdown logout always pop up. How do i separate this 2 dropdown button?

my chart

<button class="btn btn-secondary dropdown-toggle" type="button" id="chartDropdown" onclick="dropdownChart()">
  Chart
</button>
<div class="dropdown-menu dropdown-menu-right" style="width:400px;" id="dropdownShow" aria-labelledby="chartDropdown">
  <form class="px-2 py-2" action="{{ url('purchase') }}" method="post">
    {{csrf_field()}}
    <div id="items"></div>
    <div class="row mx-1 px-2">
      <input type="text" name="fromE" value="#" id="fromE">
      <input type="text" name="mode" value="add">
      <input type="text" name="total" value="" id="total">
      <button type='submit' class="btn btn-primary">Purchase</button>
    </div>
  </form>
</div>

my logout button

<ul class="nav navbar-nav ml-auto">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="dropdown()">
      {{ Auth::user()->name }}
    </a>
    <div class="dropdown-menu dropdown-menu-right" id="dropdownShow" aria-labelledby="navbarDropdownMenuLink">
      <a class="nav-link " href="{{ route('logout') }}">Logout</a>
    </div>
  </li>
</ul>

Answer 1

Your two dropdown buttons have the same id.

Give a different ID to one of your button like id="dropdownShowChart" for the Chart button and id="dropdownShowLogout" the other one.