Bootstrap Carousel не будет работать с динамически созданными элементами из JS

Я пытаюсь создать ленту социальных сетей, например LinkedIn, где каждый элемент div представляет собой карусель, которая отображает изображения так же, как лента социальных сетей. В JS на основе ответа API я динамически создаю следующий элемент с изображениями для карусели:

  <div  class = "carousel slide" data-bs-ride = "carousel">
    <div class = "linkedin_left">
      <div class = "user-cred_main">
        <div class = "img_main"> <img src = "company_logo.jpg" alt = "company_logo"></div>
        <div class = "user_cred">
          <h3>Company Name</h3>
        </div>
      </div>
      <div class = "linkedin_right">
        <img src = "linkedin_logo.png" alt = "linked-in_logo">
      </div>
    </div>
    <p class = "linkedin_content">Caption for social media post</p>
    <div class = "carousel-inner">
      <div class = "carousel-item active">
        <img src = "img.jpg" class = "d-block w-100" alt = "...">
      </div>
      <div class = "carousel-item">
        <img src = "img.jpg" class = "d-block w-100" alt = "...">
      </div>
      <div class = "carousel-item">
        <img src = "img.jpg" class = "d-block w-100" alt = "...">
      </div>
    </div>

Вышеупомянутый фрагмент динамически создается из JS и отображается как сообщение в социальных сетях, которое содержит логотип компании, название, заголовок и изображения, которые отображаются в виде карусели. Я использовал следующий cdn для включения Bootstrap:

<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin = "anonymous">

<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin = "anonymous"></script>  

Проблема в том, что загрузочная карусель просто не работает с указанным выше динамически отображаемым элементом. Если я жестко закодирую приведенный выше фрагмент прямо в тело html, карусель начнет работать, но она не будет работать с тем же фрагментом, который генерируется динамически. Я проверил в инструментах разработчика Chrome, динамически сгенерированный элемент точно такой же, как жестко закодированный элемент, но он работает только для последнего. Я пытался возиться с атрибутом "data-bs-ride=carousel", но это не помогает. Я новичок в Bootstrap, поэтому у меня не так много решений. Любой вклад действительно поможет мне.

Обновлено: функция сценария, которая добавляет слайды карусели к телу

function Posts1(obj){
requestBody.companyId=obj.companyId;
requestBody.accessToken=obj.accessToken;
console.info(requestBody);
const options = {
    method:'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: requestBody
}
var xmlhttp = new XMLHttpRequest();   // Get Ugc Posts api call 
theUrl = "https://localhost:44346/api/GetUgcPosts";
xmlhttp.open("POST", theUrl);
xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xmlhttp.send(JSON.stringify(requestBody));
xmlhttp.onload=()=>{
    if (xmlhttp.status==200){
        let i=0;
        data=JSON.parse(xmlhttp.response);
        data.post.slice().forEach(element => {
            const linkedin_sec=document.createElement('div');
            linkedin_sec.className = "carousel slide";
            linkedin_sec.setAttribute("data-bs-ride","carousel")
            let link = "";
            let caption = "";           
            const pfp_name='<div class = "linkedin_left"><div class = "user-cred_main"><div class = "img_main"> <img src = "'+data.pfp+'" alt = "user_avatar"></div><div class = "user_cred"><h3>'+data.orgName+'</h3></div></div><div class = "linkedin_right"><img src = "/img/linkedin.png" alt = "linked-in_avatar"></div></div>';                
            if (element.caption.includes('https')){
                link=element.caption.split('https')[1].split(' ')[0];
                caption='<p class = "linkin_content">'+element.caption+'</p><a href = "https'+link+'">Follow Link</a>'
            }
            else{
                caption='<p class = "linkin_content">'+element.caption+'</p>'
            }
            const slides=document.createElement('div');
            slides.className = "carousel-inner";
            let i=0;
            element.imgUrl.forEach(img=>{
                
                const imgSlide='<div class = "carousel-item active"><img src = "'+img+'" class = "d-block w-100" alt = "..."></div>';
                i++;
                slides.insertAdjacentHTML("afterbegin",imgSlide);
            })
            if ((element.imgUrl[0])&&(element.imgUrl.length>1)){
            }
            
            linkedin_sec.innerHTML=pfp_name+caption;
            linkedin_sec.appendChild(slides);
            document.body.insertBefore(linkedin_sec, document.body.firstChild);
    })
    }
    else{
        console.info("Error")
    }
    
}

}

Также добавлен следующий скрипт

<script>
$(window).load(function(){
$('.carousel').carousel({
  interval:1000
});
console.info("window is loaded");
})
</script>