How to change the position of an open dropdown?

Question

Bootstrap

There are 2 buttons: A and B. Button A with dropdown. She works as she should.

By pressing button B, I open the dropdown of button A through JS: Dropdown, obviously, opens under button A, as if I pressed button A. But I need this (from button A) dropdown to open under button B. I tried to set the transform of the opening window both before dropdown.dropdown('toggle') and after. But bootstrap overwrites my changes in both cases. I did this (where I took positions from the button):
dropdown.dropdown('toggle');

dropmenu.css('transform', 'translate(' + left + 'px, ' + top + 'px)');

The problem is that in this way I can easily specify any property, but they are written to the element's style and therefore bootstrap overwrites any property from the following:

<div 
  class="filter-dropmenu dropdown-menu dropdown-menu-end show" 
  style="
    position: absolute; 
    inset: 0px auto auto 0px; 
    margin: 0px; 
    transform: translate(204px, 204px);
  " 
  data-popper-placement="bottom-start">
</div>

Is it possible to move the element using other properties or somehow change it after the bootstrap actions? Through the developer panel after everything changes successfully, but after a click - no. Moreover, the dropdown events did not help either, even "shown".

Answer 1

I did this: by pressing button B, I move button A to it through B.append( A.detach() ), A do display: none and immediately activate dropdown A through A.dropdown('toggle'). Thus, the dropdown opens, as it were, under B. And in place of button A at this moment lies its external copy, by pressing which A will return to its place.