Bootstrap 5: Why is the "X" not showing for an "Alert Dismissable"

I have Bootstrap 5 loaded via Node Modules.

I am calling the Alert Dismissible from inside a JS function. It works

HOWEVER, My Alert delivers a very bad button, in the wrong place, BUT, it does close. SEE SCREEN SHOT. However, why it does it not deliver the nice BS "X" in the correct place on the right hand side? Possibly something with the JS? But I can't see it. Many thanks!

My JS Code:

  if(id == "108" ){
                $("#epo").html("<button type=button  data-bs-dismiss=alert aria-label=Close>").addClass("alert alert-warning alert-dismissible fade show  btn-close").append('this is an EPO');
                $("tr.child td.checkboxOut input").filter(function (index) {
                    return $(this).attr("id") == id;
                }).val(time).css({
                    "color": "rgb(42, 144, 85)",
                    "text-align": "center",
                    "border": "2px solid rgb(42, 144, 85"
                });
            }else {
                BLAH BLAH BLAH
            }