Dynamic update of popover content

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div style="text-align:center; margin-top: 200px">
  <span class="test">
    <button class="e-class" data-eid="15">
    Click here
    </button>
  </span>
</div>

JavaScript

$(".test").popover({
		selector: ".e-class",
    placement: "bottom",
    trigger: "click",
    title: "Loading...",
    html: true
}).on("inserted.bs.popover", function(e) {
    var popover = $(e.target).data('bs.popover');
    var tip = $(popover.tip);
    tip.css({width: "100%", height: "200px"});
    var EID = $(e.target).data("eid");
    var bodyEl = tip.find(".popover-body");
    var titleEl = tip.find(".popover-header");
    // Show loading spinner while data is fetched
    bodyEl.html("<div class='d-flex justify-content-center'><div class='spinner-border text-secondary' role='status'><span class='sr-only'>Loading...</span></div></div>"); // Bootstrap 4.3
    $.ajax("/echo/js/?js=This is super long content that should wrap around to a new line - and provide accessible data from the selector: " + EID)
        .done(function(data) {
         		titleEl.html("Displaying Data");
            bodyEl.html(data);
            popover._popper.update(); // update location
        }).fail(function() {
            bodyEl.html("Sorry, something went wrong");
        });
});