使用jquery和javascript动态添加引导转盘

我必须创建一个网站只使用html，js和boostrap，但我有太多的旋转木马在网站上，所以我试图创建他们动态加载使用下面的代码。下面给出的是女孩的种族数据。同样，我有男孩的衬衫、男孩的裤子、男孩的长裤数据。旋转木马显示出来，但“上一个”和“下一个”按钮有一些问题。由于AppendCarouselements函数调用了4次，应该有4个“上一个”和“下一个”按钮，但只有2个“上一个”和“下一个”按钮。其中一双甚至不起作用。当我点击这对起作用的按钮时，所有的旋转木马都会滑动到下一个项目（这是不应该发生的）。请帮助我

var girls_ethnic=[
    {
        name:"pinky frock",
        img_name:"ethnic1",
        price:"419",
        original_price:"599",
        discount:"30% OFF"
    },
    {
        name:"blue frock",
        img_name:"ethnic2",
        price:"599",
        original_price:"",
        discount:""
    },
    {
        name:"cutie pink frock",
        img_name:"ethnic3",
        price:"1609",
        original_price:"2299",
        discount:"30% OFF"
    },
    {
        name:"rainbow frock",
        img_name:"ethnic4",
        price:"419",
        original_price:"599",
        discount:"30% OFF"
    },
    {
        name:"white and black bow frock",
        img_name:"ethnic5",
        price:"499",
        original_price:"599",
        discount:"20% OFF"
    },
    {
        name:"butterfly frock",
        img_name:"ethnic6",
        price:"799",
        original_price:"",
        discount:""
    },
    {
        name:"red and bow elegant frock",
        img_name:"ethnic7",
        price:"849",
        original_price:"",
        discount:""
    },
    {
        name:"rose frock",
        img_name:"ethnic8",
        price:"419",
        original_price:"599",
        discount:"30% OFF"
    },
    {
        name:"shinny red frock",
        img_name:"ethnic9",
        price:"799",
        original_price:"",
        discount:""
    },
    {
        name:"black frock",
        img_name:"ethnic10",
        price:"700",
        original_price:"",
        discount:""
    }
]

函数fillData（）{
附件旋转木马（女孩/民族，“女孩/民族”）；
附加旋转木马（boys_dungrees，“boys_dungrees”）；
附件旋转装置（男孩衬衫，“男孩衬衫”）；
附件旋转装置（男孩裤，“男孩裤”）；
}
功能附件旋转木马组件（服饰阵列，类别）{
var k=0；
var category_id=“#”+类别；
如果（k==0）{
变量$carousel_basic=$（''）+
''+
''+
''+
''+
'');
$（'旋转木马'）.append（$carousel_basic）；
}
对于（var幻灯片=0；幻灯片<代码>
功能附件旋转木马组件（服饰数组、类别、标题）{
var k=0；
var category_id=“#”+类别；
如果（k==0）{
var carousel_basic=
`${title}
`
$（'旋转木马'）.append（旋转木马基础）；
}
对于（var slides=0；slides）您可以用完整的代码与我联系吗？嘿，谢谢您的回复。我可以给您发送电子邮件吗？是的，欢迎：学习。eman@gmail.comOkay我正在发送一封电子邮件，非常感谢你。
function fillData(){
    appendCarouselElements(girls_ethnic,"girls_ethnic");
    appendCarouselElements(boys_dungrees,"boys_dungrees");
    appendCarouselElements(boys_shirts,"boys_shirts");
    appendCarouselElements(boys_pants,"boys_pants");
}
function appendCarouselElements(dress_array,category){
    var k=0;
    var category_id="#"+category;
    if(k==0){
        var $carousel_basic=$('<div id='+category+' class="carousel slide" data-ride="carousel" interval="false">'+
        '<div class="carousel-inner">'+
        '</div>'+
        '<a class="carousel-control-prev" href='+category_id+' role="button" data-slide="prev">'+
        '<span class="carousel-control-prev-icon" aria-hidden="true"></span>'+
        '<span class="sr-only">Previous</span>'+
        '</a>'+
        '<a class="carousel-control-next" href='+category_id+' role="button" data-slide="next">'+
        '<span class="carousel-control-next-icon" aria-hidden="true"></span>'+
        '<span class="sr-only">Next</span>'+
        '</a>'+
       '</div>');
    $('#carousels').append($carousel_basic);
    }
for(var slides=0;slides<2;slides++){
    if(slides==0){
        $(".carousel-inner").append('<div class="carousel-item active"><table></table></div>');
    }
    else{
        $(".carousel-inner").append("<div class='carousel-item '><table></table></div>");      
    }
    var main=document.getElementsByTagName("table")[slides];
    var row= main.insertRow(-1);
    for(var i=k+1;i<=k+5;i++){
        console.log(dress_array);
        var x="./images/"+category+"/"+dress_array[i-1].img_name+".jpg";
        var item=row.insertCell(-1);
        item.innerHTML='<img class="dress-image" src='+x+' alt="First slide">'+'<div class="info"><p class="text-center text-capitalize font-weight-bold name">'+
        dress_array[i-1].name+'</p>'+
        '<p class="price">Rs '+dress_array[i-1].price +'<span class="float-right font-weight-bold discount">'+dress_array[i-1].discount+'</span></p></div>'
    }
    k=(slides+1)*5;
}
}



function appendCarouselElements(dress_array,category,title){
    var k=0;
    var category_id="#"+category;
    if(k==0){
        var carousel_basic=
        `<h3>${title}</h3>
        <div id=${category} class="carousel slide" data-ride="carousel" data-interval="false">
            <div class="carousel-inner" id="${category}_carousel_inner">
            </div>
            <a class="carousel-control-prev" href=${category_id} role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href=${category_id} role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>`
    $('#carousels').append(carousel_basic);
    }
    for(var slides=0;slides<max_slides;slides++){
    if(slides==0){
        $("#"+category+"_carousel_inner").append(`<div class="carousel-item active" id="${category}_carousel_item_${slides}"></div>`);
    }
    else{
        $("#"+category+"_carousel_inner").append(`<div class="carousel-item" id="${category}_carousel_item_${slides}"></div>`);      
    }
    var slide_id=category+"_carousel_item_"+slides;
    $("#"+slide_id).append(`<div class="row" id="${category}_row_${slides}"></div>`);
    for(var i=k+1;i<=k+max_items;i++){
        var x="./images/"+category+"/"+dress_array[i-1].img_name+".jpg";
        var rows=category+"_row_"+slides;
        $("#"+rows).append(`
        <div class="col item">
        <div class="dress-image">
        <img  src="${x}" alt="First slide">
        </div>
        <div class="info">
            <p class="text-center text-capitalize font-weight-bold name">${dress_array[i-1].name}</p>
            <div class="row">
                <div class="col">
                    <span class="price">Rs&nbsp;${dress_array[i-1].price}</span>
                    ${(max_items===6 && dress_array[i-1].original_price) ? '<span class="original_price">' + dress_array[i-1].original_price + '</span>' : ''}
                </div>
                <div class="col">
                ${(dress_array[i-1].discount) ? '<span class="discount">' + dress_array[i-1].discount + '</span>' : ''}
                </div>
            </div>
        </div>
        </div>`)
    }
    k=((slides+1)*(max_items));
    }
}