Can't load dynamical generated code over AJAX in Bootstrap Popover

Question

I'm try now over 5 hours to load dynamical generated code via AJAX in Bootstrap 4 Popover's. I still tried many variations found on Google but nothing get me the expected result.

I use jQuery 3.4.1.

I want to load the HTML form my file SucheBedarfspositionenAuslesen.php into a Bootstrap 4 Popover that is dynamically generated.

First here the source code:

$('.popu').popover({
    html: true,
    placement: 'auto',
    trigger: 'hover',
    content: function(){
        var fetch_data = '<div class="d-flex justify-content-center"><div class="spinner-border" role="status"><span class="sr-only">Lade...</span></div></div>';
        var element = $(this);
        var id = element.attr("id");
        $.ajax({  
            url: "ajax/SucheBedarfspositionenAuslesen.php?nr=" + id,
            success: function(data)
            {  
                fetch_data = data;
            }
        });
        return fetch_data;
    }
});

All code be correct fetched and shown if I set an alert() for debug. But the HTML can't be delivered to the return fetch_data . I still get my loading spinner. When I debug with a alert() after it the alert doesn't work. It's like there is a cut after the ajax routine.

When I try to return data in the success directly I get a "Uncaught TypeError: Cannot read property 'length' of undefined (sanitizer.js:93)".

Now on the end of my skills in this case. :) I hope you can help me to fix my issue.

Edit: Here the result I get in data:

<table class="table">
<thead class="bg-info">
    <tr>
        <th scope="col">Bestellung</th>
        <th scope="col">Bezeichnung</th>
        <th scope="col" class="text-center">Anzahl</th>
        <th scope="col">Lieferant</th>
    </tr>
</thead>
<tbody>
        <tr>
        <th scope="row">14013MAIL</th>
        <td>Logitech Wireless Mouse</td>
        <td class="text-center">1</td>
        <td>Conrad</td>
    </tr>
        <tr>
        <th scope="row">14013TOOL</th>
        <td>Tastatur</td>
        <td class="text-center">1</td>
        <td>HP</td>
    </tr>
    </tbody>
</table>

The Table is dynamical and can have more than two rows.

And here the source code:

<?php
/**
 * Konfigurationsdatei einbinden
 */
include("../config.inc.php");
?>
<table class="table">
    <thead class="bg-info">
        <tr>
            <th scope="col">Bestellung</th>
            <th scope="col">Bezeichnung</th>
            <th scope="col" class="text-center">Anzahl</th>
            <th scope="col">Lieferant</th>
        </tr>
    </thead>
    <tbody>
    <?php
    /**
     * Filtere Vars
     */
    $Bedarfsnummer = filter_input(INPUT_GET, "nr", FILTER_SANITIZE_NUMBER_INT);

    /**
     * Auflisten der Einträge
     */
    $Bedarfspositionen = $mysqli->query("
        SELECT 
            id,
            Bedarfsnummer,
            Bestellung,
            Bezeichnung,
            Anzahl,
            Lieferant,
            REQ,
            RITM,
            Notiz 
        FROM 
            bedarfspositionen 
        WHERE 
            Bedarfsnummer = '".$Bedarfsnummer."'
        ") or die($mysqli->error);
    while($Bedarfsposition = $Bedarfspositionen->fetch_assoc())
    {
    ?>
        <tr>
            <th scope="row"><?php echo $Bedarfsposition['Bestellung'];?></th>
            <td><?php echo $Bedarfsposition['Bezeichnung'];?></td>
            <td class="text-center"><?php echo $Bedarfsposition['Anzahl'];?>    </td>
            <td><?php echo $Bedarfsposition['Lieferant'];?></td>
        </tr>
    <?php
    }
    ?>
    </tbody>
</table>