I have a rails app using jquery and bootstrap for a table. The table header has 'visits' that should display popover with form to edit when clicked. This is working on initial page load, but after clicking between the tabs above the visits, then clicking on a visit to edit, two popover instances display -
one correctly next to the target element,
and one floating in the top left corner of the viewport, with the arrow element on the opposite side.
Also, only one of the two has the content div. The other just has the title div and the arrow.
popover displays correctly if 'Template, Quantity/Billing' tabs aren't clicked
<div class="popover visit-group-popover visit-group-194847-popover fade bs-popover-left show" role="tooltip" id="popover613837" x-placement="left" style="position: absolute; transform: translate3d(123px, 617px, 0px); top: 0px; left: 0px; will-change: transform;"><div class="arrow" style="top: 132px;"></div><h3 class="popover-header">Edit Visit <a href="#" class="close">×</a></h3><div class="popover-body"><form class="w-100 visit-group-form d-flex flex-column" id="edit_visit_group_194847" action="/visit_groups/194847" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="_method" value="patch"><input type="hidden" value="22386" name="visit_group[arm_id]" id="visit_group_arm_id">
after clicking between the 'Template, Quantity/Billing' tabs
<div class="popover visit-group-popover visit-group-194847-popover fade bs-popover-left show" role="tooltip" id="popover694205" x-placement="left" style="position: absolute; transform: translate3d(529px, 744px, 0px); top: 0px; left: 0px; will-change: transform;"><div class="arrow" style="top: 14px;"></div><h3 class="popover-header">Edit Visit <a href="#" class="close">×</a></h3><div class="popover-body"></div></div><div class="popover visit-group-popover visit-group-194847-popover fade show bs-popover-right" role="tooltip" id="popover611305" x-placement="right" x-out-of-boundaries="" style="position: absolute; transform: translate3d(5px, 5px, 0px); top: 0px; left: 0px; will-change: transform;"><div class="arrow" style="top: 36px;"></div><h3 class="popover-header">Edit Visit <a href="#" class="close">×</a></h3><div class="popover-body"><form class="w-100 visit-group-form d-flex flex-column" id="edit_visit_group_194847" action="/visit_groups/194847" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="_method" value="patch"><input type="hidden" value="22386" name="visit_group[arm_id]" id="visit_group_arm_id">
I've tried the popper api modifiers and tried popover('dispose') before initializing new popover but can't figure out how it is happening.