html not appending to the carousel on popover

I Am Trying to make a popover with a bootstrap carousel and where the carousel items are to be generated and appended from a script but I get the carousel but I am unable to append the item. I tried hard but I didn’t come up with a solution.

the HTML initialized is as below

HTML:

<div class="popup" data-popup="popup-1">
    <div class="popup-inner">
        <a href="#" class="pop-head"><i class="fas fa-bars"></i></a>
        <div class="frame">
            <div id='carousel' class='carousel slide' data-bs-ride='carousel'> 
                <div class='carousel-inner items-slider1'>
                </div>
            </div>
        </div>
    </div>
</div>

the script I have tried was

Javascript:

function findallchord(currentchord , currenttype) {
    for (let i = 1; i < 10; i++) {
        if (Raphael.chord.find(currentchord ,currenttype,i)) {
            Raphael.chord("div3", Raphael.chord.find(currentchord , currenttype,i), currentchord +' ' +currenttype).element.setSize(75, 75);
        }
    }
}   

var getChordRoots = function (input) {
    if (input.length > 1 && (input.charAt(1) == "b" || input.charAt(1) == "#"))
        return input.substr(0, 2);
    else
        return input.substr(0, 1);
};

$('.popup').on('shown.bs.popover', function () {
    $('.carousel-inner').carousel();
});

$('[data-bs-toggle="popover"]').popover({ 
    html: true,
    content: function() {       
    return $('.popup').html();
}}).click(function() {
    var oldChord = jQuery(this).text();
    var currentchord = getChordRoots(oldChord);
    var currenttype = oldChord.substr(currentchord.length);
    findallchord(currentchord , currenttype);                
    var chordsiblings = $('#div3').children().siblings("svg");
    for (let i = 1; i < 10; i++) {
        if (Raphael.chord.find(currentchord , currenttype,i)) {
            var itemid = "chord" + i;
            var theDiv  = "<div class='carousel-item"+((itemid=="chord1") ? ' active':'')+" ' id='"+currentchord+''+itemid+"'> "+chordsiblings[i-1].outerHTML+" </div>";            
            $('.items-slider1').append(theDiv);
        }       
    }             
});

I have also tried appendTo also as

$(theDiv).appendTo('.items-slider1');

Please Help to solve this

This is the output I get, the appended elements are not in the carousel

Note: I am using Bootstrap 5

Answer

It was needed to do call the click function first before popover as below

$('[data-bs-toggle="popover"]').click(function() {
    var oldChord = jQuery(this).text();
    var currentchord = getChordRoots(oldChord);
    var currenttype = oldChord.substr(currentchord.length);
    findallchord(currentchord , currenttype);                
    var chordsiblings = $('#div3').children().siblings("svg");
    for (let i = 1; i < 10; i++) {
        if (Raphael.chord.find(currentchord , currenttype,i)) {
            var itemid = "chord" + i;
            var theDiv  = "<div class='carousel-item"+((itemid=="chord1") ? ' active':'')+" ' id='"+currentchord+''+itemid+"'> "+chordsiblings[i-1].outerHTML+" </div>";            
            $('.items-slider1').append(theDiv);
        }       
    }             
}).popover({ 
    html: true,
    content: function() {       
    return $('.popup').html();
}});

Advertisement

Answer