Bootstrap v3.4.1 popover positioning fails

Im just using bootstrap v3.4.1 because of the popover and tooltip i’m not using anything else.

    <a href="#" class="edit"
                                        data-toggle="popover"
                                        data-icon="{{ category.icon }}"
                                        data-placement="top"
                                        data-content='
                                        <input type="text" name="hej" value="{{ category.title }}">
 
        <div class="SelectContainer"></div><input type="submit" name="EditCat" value="Redigera Kategori">
                                        '><i class="fa-regular fa-pen-to-square"></i></a>

This one works perfectly fine. It opens my popover and show the html everything works this far.

enter image description here

This is the three rows i have to work with right now.

Lets open the first one [Test]: enter image description here

Like you see the popover, goes to god knows where.

But if i open the last one and then the first and then the first one more time, this happens:

enter image description here

Its not right, but its better then the first try.

Anyone got any tips and ideas how i can solve this problem?

The only javascript i have right now is this:

$("[data-toggle=popover]").popover({html: "true", sanitize: false});