How to put for loop in Bootstrap-Popover in JavaScript?

Before typing this question up I spent a number of days looking for an example that was close enough to help to no avail and so I’m bringing my specific use case to SO

I have three cards of bootstrap 5.

cards

And I want to create Popovers for each card, but maybe the manager wants to make a hundred more. I want to create using a for loop. I don’t want to enter every single code. How is this possible?

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/bootstrap.rtl.min.css">
    <title>Document</title>
</head>
<body>
<div style="height:200px"></div>
<div class="container">
    <div class="row">
        <div class="col-lg-4 mb-3 servicePOP" data-aos="fade-up" tabindex="0" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" title="Title" data-bs-content="">
            <div class="card position-relative">
                <div class="d-block card-icon">
                    <img src="https://www.virtuozzo.com/company/blog/wp-content/uploads/2019/04/laravel-framework.png" class="card-img" alt="Title">
                </div>
                <div class="card-body">
                    <a href="#" class=" text-decoration-none text-dark ">
                        <h5 class="card-title ">Title 1</h5>
                    </a>
                    <p>A short description</p>
                    <a href="#" class="btn btn-primary">More Details</a>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mb-3 servicePOP" data-aos="fade-up" tabindex="0" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" title="Title" data-bs-content="">
            <div class="card position-relative">
                <div class="d-block card-icon">
                    <img src="https://www.virtuozzo.com/company/blog/wp-content/uploads/2019/04/laravel-framework.png" class="card-img" alt="Title">
                </div>
                <div class="card-body">
                    <a href="#" class=" text-decoration-none text-dark ">
                        <h5 class="card-title ">Title 2</h5>
                    </a>
                    <p>A short description</p>
                    <a href="#" class="btn btn-primary">More Details</a>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mb-3 servicePOP" data-aos="fade-up" tabindex="0" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" title="Title" data-bs-content="">
            <div class="card position-relative">
                <div class="d-block card-icon">
                    <img src="https://www.virtuozzo.com/company/blog/wp-content/uploads/2019/04/laravel-framework.png" class="card-img" alt="Title">
                </div>
                <div class="card-body">
                    <a href="#" class=" text-decoration-none text-dark ">
                        <h5 class="card-title ">Title 3</h5>
                    </a>
                    <p>A short description</p>
                    <a href="#" class="btn btn-primary">More Details</a>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
<script>
    const servicePOP = document.querySelector('.servicePOP')
    const popover = new bootstrap.Popover(servicePOP, {
        sanitize: false,
        html: true,
        content: '<button type="button" class="btn btn-primary">My Button</button>'
    });
</script>
</body>
</html>

I want to create using for a loop.