How can I generate a Bootstrap popover at a mouseevent (like `mouseup` or `click`) when a user selects text across more than one `<div>`?

I tried to create a copy of my HTML and JQuery (as close as I could) in [this fiddle](https://jsfiddle.net/vinit144/hq1zgswf/9/).

As you can see in the fiddle's example, I cannot use a `div` that encapsulates all text `<div>`s because each one has an id that I need for the functioning of the buttons that the popover will have.

You will notice that a popover appears when text is selected in a single `div`, but when you select text from more than 1 `div`, the popover does not appear.

Funny thing is that this worked on Firefox a week or so ago, but stopped working as soon as I updated Firefox to the latest version (`66.0.2`).
To add, this issue has been there on chrome since the start. 

I have tried different solutions that I found here on Stack Overflow but none of them seemed to work in my case.

Any solutions as to what I am doing wrong, what alternative ways I could try to do this, or reasons as to why this may not work?

Edit:

I have tried `mouseup` for this as well and it doesn't seem to work in this version of FF or the latest Chrome. I changed it to `click` because I also have other popovers which close when the user `clicks` in the `main_div` or anywhere outside the popovers. 
Since the `click` event occurs after the `mouseup` event, I found that it would kill my popover instantly after it appeared. I had to remove this popover from the list of popovers that were click in the aforementioned `click` event and manually added it for places where I wanted it to happen.

I have no issues with using `mouseup`, just that I tried it and I didn't observe any benefits over `click` so I changed it temporarily.