How to trigger the same drop-down/popover with multiple buttons?

Question

How to trigger the same drop-down with multiple buttons?

For instance, I have a button at the top of the page special menu , and one in the middle special menu ... and another at the bottom special menu . When any of them is clicked, it should open a drop-down (or popover) nearby. Not just nearby the first special menu . But near by the clicked one.

The dropdown should be the same html element . Not html copies. Not on-the-fly copies. Not a copy at all. Just one element.

Just one copy that could be opened and displayed near by the buttons from which it has been opened.

I have found nothing using bootstrap, and have not been successful at all with Popper.js (even if I guess it might be a solution).

Answer 1

Assuming you've created the dropdown element:

var dropdown = document.createElement('div');
//  TODO: Populate the element.

or grabbed in from the DOM:

var dropdown = document.getElementById('dropdown');

You could take an approach like this:

function attachListener(target) {
    target.addEventListener('click', function() {
        if (dropdown.parentNode) {
            //  Remove dropdown from the DOM.
            dropdown.parentNode.removeChild(dropdown);
        }

        //  Add the dropdown inside the target.
        target.appendChild(dropdown);
    });
}

var targets = document.getElementsByClassName('special-menu');
for (var i = 0; i < targets.length; i++) {
    attachListener(targets[i]);
}

Of course, the exact implementation depends on how you want the DOM set up.