Recently, I encountered an issue while using a dropdown menu within a div. Even though it was functioning properly, I noticed that when I included two dropdown menus on the same page, clicking on the first one would cause both the first and second dropdowns to open simultaneously. How can I resolve this problem?
I attempted to modify the attributes such as data-toggle="dropdown", id="dropdownMenuButton", and
aria-labelledby="dropdownMenuButton"Below is the code for my first dropdown:
<div class="dropdown">
<div href="#" class="form-control b-r" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-users"></i></div>
<div class="dropdown-menu fadeInUp" aria-labelledby="dropdownMenuButton">
<label>Nº max</label>
<div class="row pb-4" >
<div id="controls" class="text-center">
<div id="minus" class="btn btn-sm-click btn-info fa fa-minus pull-left"></div>
<input id="n_max" name="N_max" class="click select-form" readonly type="text" value="" >
<div id="plus" class="btn btn-sm-click btn-info fa fa-plus pull-right"></div>
</div>
</div>
</div>
</div>
And here is the code for my second dropdown:
<div class="dropdown">
<div href="#" class="form-control b-r" id="dropdownMenuButton_2" data-toggle="dropdown_2" aria-haspopup="true" aria-expanded="false"><i class="fas fa-users"></i></div>
<div class="dropdown-menu fadeInUp" aria-labelledby="dropdownMenuButton_2">
<label>Nº max</label>
<div class="row pb-4" >
<div id="controls" class="text-center">
<div id="minus" class="btn btn-sm-click btn-info fa fa-minus pull-left"></div>
<input id="n_max" name="N_max" class="click select-form" readonly type="text" value="" >
<div id="plus" class="btn btn-sm-click btn-info fa fa-plus pull-right"></div>
</div>
</div>
</div>
</div>
The desired outcome is for each dropdown to function independently, so that clicking on the first dropdown opens only the first dropdown, and vice versa.
I appreciate any assistance or suggestions provided. Thank you!