data popover not showing up in modal

Question

I have the following popover buttons in multiple areas of my pages. With onmouseenter and onmouseleave the popover is working just fine placing the info/tip popover next to the button/icon that was engaged. However when using the same button popovers in a modal the popovers are not appearing.

<div id="serviceModalOverlay" class="serviceModalOverlay"></div>
<div id="serviceModal" class="modal serviceModal" style="" tabindex="-1" role="document" aria-labelledby="serviceModalLabel" aria-hidden="true">
    <div class="" role="document">
      <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="serviceModalTitle" style="width:100%;text-align:center;font-weight:bolder;">
              Event <span id="modalSubTitle"> </span>
              <button type="button" class="btn btn-secondary" style="float:right;" onclick="closeServiceModal();" data-dismiss="modal">CLOSE</button>
            </h5>
        </div>
        <div class="service-modal-body" style="font-weight:bolder;font-size:16px;">

          <!-- DYNAMIC CONTENT LOADS HERE 
             The dynamic content are loaded from php scripts
             after the user clicks a button to open the modal
          -->

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" onclick="closeServiceModal();" data-dismiss="modal">CLOSE</button>
        </div>
      </div>
    </div>
</div>  

The below button is loaded into the above MODAL (with other HTML) as a dynamic page load.

The JS:

  // dynamically load content into the modal when user clicks a button
  function openServiceModal(pageID,eventID) {
    ge("modalSubTitle").innerHTML = pageID ;
    $('.service-modal-body').load("adminEvent"+pageID+".html?eventID="+eventID,function(){
        $('#serviceModal').modal({show:true});
    });
  }
  
  function closeServiceModal() {
    $('#serviceModal').modal({show:false});
  }

  function showPopup(id) {
    console.log("open popup") ;
    document.getElementById(id).click() ;
  }
  
  function hidePopup(id) {
    console.log("close popup") ;
    var el = document.getElementById(id).click() ;
  }

I 'think' they are working but are hidden beneath the modal itself. I think this because I can see the showPopup() and hidePopup() being called in the dev browser whenever I roll my mouse through the button icon itself. In the modal popovers, I changed the data-container='modal-body' and it did not work. I even added z-index:1100; to the CSS buttonHelp and too .popover (because the modal z-index is 1050), but it had no affect.

How can I fix this?

UPDATE:

I found the native .popover CSS z-index and it was already set to 1060, which is higher than the native .modal popover set to 1050. So something else is going on.

I added the console.log messages to each function and they are executing when the buttons are engaged in the modal. But I do not see the any HTML rendered in the dev tools browser - so I don't even think its popping up anywhere (where I originally thought it was popping up behind the modal)

UPDATE 2:

I found some extra clues. In the main page, the button HTML has extra fields that the dynamically loaded MODAL content buttons do not have:

In main page:

<button type="button" class="buttonHelp" id="buttonID0" 
   onmouseenter="showPopup(this.id);" 
   onmouseleave="hidePopup(this.id);" 
   data-container="body" 
   data-toggle="popover" 
   data-placement="top" 
   data-content="Foo bar info" 
   data-original-title="" 
   title="">
   <i class="iconHelpIcon icon-information-variant"></i>
 </button>

data-original-title, title and when the popup appears an extra parameter appears aria-describedby='popover564205'. These parameters never appear in the modal popovers.

The modal:

<button type="button" class="buttonHelp" id="buttonID102" 
   onmouseenter="showPopup(this.id);" 
   onmouseleave="hidePopup(this.id);" 
   data-container="body" 
   data-toggle="popover" 
   data-placement="top" 
   data-content="Blah blah blah">
   <i class="iconHelpIcon icon-information-variant"></i>
 </button>