Adding a class to a button breaks Bootstrap popover

Question

I use a sanitize: false configures popover with Bootstrap 5:

<button type="button" 
        class="btn btn-primary btn-sm" 
        data-bs-container="body" 
        data-bs-toggle="popover" 
        title="register"
        data-bs-content="${popoverContent()}">
         <i class="fas fa-server">
</button>

js part:

let popoverContent = function ( ) {
    let buttonsDiv = document.createElement("div")
    let delButton = document.createElement("button");
    delButton.textContent = 'delete';
    buttonsDiv.appendChild(delButton);
    return buttonsDiv.innerHTML;
}

which looks like this:

if I now change the js code to:

let popoverContent = function ( ) {
    let buttonsDiv = document.createElement("div")
    let delButton = document.createElement("button");
    delButton.textContent = 'delete';
    delButton.classList.add('btn');
    buttonsDiv.appendChild(delButton);
    return buttonsDiv.innerHTML;
}

I get this:

Why did not just the button get another class="btn" attribute?

update: This is what the HTML looks in the console after the classList.add('btn'):

<button type="button" 
        class="btn btn-primary btn-sm" 
        data-bs-container="body" 
        data-bs-toggle="popover" 
        data-bs-placement="left" 
        title="" 
        data-bs-content="<button class=" btn"="" 
                                 data-bs-original-title="register on server">delete</button>

obviously class=" btn"="" should be class="btn" - but where is my error?

update: I added a fiddle to show the problem: https://jsfiddle.net/93gLyha2/12/ - also watch how the button changes it size when uncommenting the 2nd or 3rd line in the js part of the fiddle