Two Bootstrap dropdown not working independently of each other

trying to figure out how to stop both buttons from showing a drop-down when only one is clicked

here is my html code

<form action="" method="post">      <div class="row">          <div class="col-md-4" style="width: fit-content;">                    <input type='text' name="data" class="test"/>                    <button name="forwardBtn" type="submit">Search Image Name</button>          </div>                   <div class="col-md-4 input-group left" >                    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split tag1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ><span class="label-icon" >Networking</span> <span class="caret" >&nbsp;</span></button>                    <div class="dropdown-menu dropdown-menu-right" >                      <ul class="category_filters" >                                                                   </ul>                    </div>                                         <button type="button" class="btn btn-secondary dropdown-toggle2 dropdown2-toggle-split tag1" data-toggle="dropdown2" aria-haspopup="true" aria-expanded="false" ><span class="label-icon" >Security</span> <span class="caret" >&nbsp;</span></button>                    <div class="dropdown-menu dropdown-menu-left" >                      <ul class="category_filters2" >                                                                   </ul>                    </div>                  </div>           <div class="col-md-4 input-group2 right" >                                     </div>          </div>        </div>    </form>  

I am using bootstrap with jquery

how do I order my 2 input-groups? how do I keep the 2 dropdown buttons lined up AND show only the dropdown for each button

https://stackoverflow.com/questions/66683156/two-bootstrap-dropdown-not-working-independently-of-each-other March 18, 2021 at 08:27AM