Bootstrap Data-Toggle attribute is not working with Cards generated from JS loop

Question

I'm working on a website that makes a call to a database. It takes the JSON from the database and loops through a specific node -- appending HTML code to a div tag, which creates a Card for each database entry. I want to be able to have a Bootstrap Popover (or Tooltip) that appears when a Card is clicked (or hovered over if Tooltip). The Cards that are generated within the function fail to produce a Popover or Tooltip at all. If I append the same HTML code outside the function using JQuery, it works just fine. I'm unsure what is happening here.

Here's the function that loops through the database JSON and creates a card for each child.

function getWeekEvents(day, id) {
    return firebase.database().ref(day).once('value').then(function(snapshot) {
        var data = snapshot.val();
        for (item in data) {
            var event = data[item]["event"];
            var loc = data[item]["loc"];
            var time = data[item]["time"];

            $("#" + id).append("<div class='card border border-primary week-cards-ann event-style' data-toggle='popover' data-content='Content' data-placement='right'>" + 
                                    "<div class='card-body my-lg-n3'>" + 
                                        "<div class='card-text my-lg-n1 float-left ml-lg-n3'>" + 
                                            "<p>" + event.substring(0,10) + "...</p>" +
                                        "</div>" + 
                                    "</div>" +
                                "</div>");
        }

    });
}

The code below is outside any function and works just fine. It creates a card in the same way, but the Popover works.

$("#tuesday").append("<div class='card border border-primary week-cards-ann event-style' data-toggle='popover' data-placement='top' title='Hello'>" + 
"<div class='card-body my-lg-n3'>" + 
    "<div class='card-text my-lg-n1 float-left ml-lg-n3'>" + 
        "<p>" + "...</p>" +
    "</div>" + 
"</div>" +
"</div>");

And I also have this part that is required for Popovers to work.

$(function () {
    $('[data-toggle="popover"]').popover()
});

I also tried creating a Tooltip in the same way, instead of a Popover, but it resulted in the same problem. This lead me to believe that there may be something happening with the data-toggle attribute? I could be wrong. Does anyone have any thoughts?