I'm inserting Dropdowns into a dynamic form. The problem is when i insert more than one Dropdown.
When i click on any Dropdown button, the toggle list only shows above the first Dropdown button, not above the Dropdown button i clicked.
So say i have 3 Dropdown buttons inserted into the form. If i click Dropdown 2 or 3; the list of contents show above Dropdown 1.
This is the code i'm inserting into the form.
let vendor = `<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu test" id="vendor['+nextindex+']" name="vendor['+nextindex+']" aria-labelledby="dropdownMenu1">
<li><a href="#" data-value="action">Action</a></li>
<li><a href="#" data-value="another action">Another action</a></li>
<li><a href="#" data-value="something else here">Something else here</a></li>
</ul>
</div>`
