Popover for buttons in a foreach loop PHP

Question

I have a little problem. After some tests and searching work I thought, I ask my questions.

I have a <form> in a for each loop. and for every Button (its a basket button that puts a product in the basket) I reload the page, but before the refresh, I want to get a little popover that shows that something is done. I thought the best thing should be a Popover.

 <form action="[{$oViewConf->getSelfActionLink()}]" method="post" class="form-inline">
                        <input type="hidden" name="fnc" value="tobasket_alsobought">
                        <input type="hidden" name="aproducts[[{$nKey}]][am]" value="1">
                        <input type="hidden" name="aproducts[[{$nKey}]][aid]" value="[{$_product->oxarticles__oxid->value}]">
                        <input type="hidden" name="aproducts[[{$nKey}]][anid]" value="[{$_product->oxarticles__oxid->value}]">

                        <button style="margin:3px auto;border:1px solid #080;border-radius:.25rem;background-color:white;" data-toggle="popover" data-trigger="focus" data-content="[{oxmultilang ident="WIDGET_NEWBASKETITEMMSG"}]" data-placement="right" type="submit" class="btn btn-info basket" title="[{oxmultilang ident="DETAILS_ADDTOCART"}]"><i class="simg simg-shopping-cart" style="margin-right:0;display:inline;"></i></button>
                    </form>

This is my form and my JS looks like this :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function() {
        $('[data-toggle="popover"]').popover("max-width", "80%");
    });
</script>

I get the Popover but only for the 1st value/button in my for each loop

How can I fix this and get the Popover be working for all buttons?

Below is a screenshot of how it looks like.

my foreach loop:

[{foreach from=$myArray item=_product name=_sProduktliste}]
...some template code to show article, price, img ....
                <div class="col-12" style="z-index:10;">
                [{oxhasrights ident="TOBASKET"}]
                <form action="[{$oViewConf->getSelfActionLink()}]" method="post" class="form-inline">
                    <input type="hidden" name="fnc" value="tobasket_alsobought">
                    <input type="hidden" name="aproducts[[{$nKey}]][am]" value="1">
                    <input type="hidden" name="aproducts[[{$nKey}]][aid]" value="[{$_product->oxarticles__oxid->value}]">
                    <input type="hidden" name="aproducts[[{$nKey}]][anid]" value="[{$_product->oxarticles__oxid->value}]">

                    <button style="margin:3px auto;border:1px solid #080;border-radius:.25rem;background-color:white;" data-toggle="crossSell_popover" data-trigger="focus" data-content="[{oxmultilang ident="WIDGET_NEWBASKETITEMMSG"}]" data-placement="bottom" type="submit" class="btn btn-info basket" title="[{oxmultilang ident="DETAILS_ADDTOCART"}]"><i class="simg simg-shopping-cart" style="margin-right:0;display:inline;"></i></button>
                </form>
                [{assign var="nKey" value=$nKey+1}]
                [{/oxhasrights}]
            </div>
        </div>
        [{if $nKey >= 12}]
        [{php}]break;[{/php}]
        [{/if}]
       [{/if}]
    [{/foreach}]

Answer 1

i solved it.

Marat his answer helped me.

i changed :

<script>
    $(document).ready(function() {
        $('[data-toggle="popover"]').popover("max-width", "80%");
    });
</script>

to

<script>
    window.onload = function(){ $('[data-toggle="crossSell_popover"]').popover() };
</script>

i also changed the name to "crossSell_popover" to avoid issues with other functions in the shop.

and @ the bottom i use

[{oxscript add="$('[data-toggle=\"crossSell_popover\"]').popover();"}]

to add the js to the base template.

Thanks a lot have a nice day