popover box - How to update popover content dynamically?

How to update popover content dynamically?

Hi, I'm trying to build a search bar on a static website that produce a Popover list of data. The search bar supposed to filter out the list of data and then update html code and send it to popover function. Here the demo of my code in CodePen

https://codepen.io/phat-xluong/pen/YzqLWwz

Here are my problems: The search filters the list of data. The list of data is updated but not transfer html content over to popover box.

JS code

//POPOEVER PART 1 - CODE TO HANDLE SEARCH/FILTER FUNCTION FOR POPOVER CONTENT ON SEARCH BAR

// INITIATE FUNCTION ON EVENT KEY DOWN
$("#searchInput")
  .keydown(function () {
    //split the current value of searchInput
    var data = this.value.toUpperCase().split(" ");
    //create a jquery object of the rows
    var jo = $("#fbody").find("li");
    if (this.value == "") {
      jo.show();
      return;
    }
    //hide all the rows
    jo.hide();

    //Recusively filter the jquery object to get results.
    jo.filter(function (i, v) {
      var $t = $(this);
      for (var d = 0; d < data.length; ++d) {
        if ($t.text().toUpperCase().indexOf(data[d]) > -1) {
          return true;
        }
      }
      return false;
    }).show();
  })
  .focus(function () {
    this.value = "";
    $(this).css({ color: "black" });
    $(this).unbind("focus");
  })
  .css({ color: "#C0C0C0" });

//POPOEVER PART 2 - CODE TO HANDLE INPUT KEY POPOVER ON SEARCH BAR

//SANITIZE TABLE ON POPOVER
$.fn.popover.Constructor.Default.whiteList.table = [];
$.fn.popover.Constructor.Default.whiteList.tr = [];
$.fn.popover.Constructor.Default.whiteList.td = [];
$.fn.popover.Constructor.Default.whiteList.th = [];
$.fn.popover.Constructor.Default.whiteList.div = [];
$.fn.popover.Constructor.Default.whiteList.tbody = [];
$.fn.popover.Constructor.Default.whiteList.thead = [];
$.fn.popover.Constructor.Default.whiteList.img = [
  "src",
  "alt",
  "title",
  "width",
  "height"
];
$.fn.popover.Constructor.Default.whiteList.label = [];
$.fn.popover.Constructor.Default.whiteList.cite = [];

//STEP 1 : INITIATE POPOVER ON FIRST KEY UP (TO UPDATE TABLE ON EACH KEY)
$("#searchInput").keyup(function () {
  $(".trigger").popover({
    container: "body",
    placement: "bottom",
    html: true,
    trigger: "focus",
    content: function () {
      var content_popover = $("#popover-content").html();
      return content_popover;
    }
  });
  //STEP 2 : INITIATE POPOVER USING ENTER KEY
  $("#searchInput").keyup(function (event) {
    var keycode = event.keyCode ? event.keyCode : event.which;
    if (keycode == "13") {
      $(".trigger").popover("show");
    }
  });
  //STEP 3 :  QUIT POPOVER IF SEARCH BAR IS EMPTY
  if ($("#searchInput").val() === "") {
    $(".trigger").popover("hide");
  }
});

$(document).keyup(function (e) {
  if (e.key === "Escape") {
    // escape key maps to keycode `27`
    $(".trigger").popover("hide");
  }
});

//STEP 4 : QUIT POPOVER USING ESCAPE KEY

//END EVENT TO HANDLE POPOVER ON SEARCH BAR

Thank for viewing my post, every answer is greatly appreciated