carousel in ejs and node.js not working while using foreach loop

Question

I'm trying do a carousel dynamically but it's not working it's all render in same page how can I solve this I'm using ejs and node.js please check the code below below I try to add class dynamically but it's not working .................................................

    <div id="multi-item" class="carousel slide carousel-multi-item mx-3" data-interval="false">

        <!--Controls-->
        <div class="controls-top">
            <a class="btn-floating" id="prev-btn" href="#multi-item" data-slide="prev"><i
                    class="fa fa-chevron-left"></i></a>
            <a class="btn-floating" href="#multi-item" data-slide="next"><i class="fa fa-chevron-right"></i></a>
        </div>
        <!--/.Controls-->

        <!--Slides-->
        <div class="carousel-inner pt-3 px-2"" role=" listbox">

           
            <!--First slide-->
            <% var i=0; %>

             
                <!-- looping data -->
                <% data.forEach((item,inx)=>{i++%>
                    <% if(inx==0 || inx%4==0){ %>
                        <div class="<%if(i==0){ %>
                            carousel-item active <% }else{%>
                        carousal-item
                        <% } %> ">

                            <div class="row row-cols-5 ">
                                <% } %>

                                    <div class="col clearfix">
                                        <div class=" card-img-top">
                                            <a href="/home/movie/<%- item.movies[0]._id %> " class="imageoutlink">
                                                <img style="border-radius:.9rem .9rem 0 0;height: 19rem ; object-fit: cover;"
                                                    src="http://localhost:3000/uploads/<%-item.movies[0].images[0].image_url%> "
                                                    class="img-fluid shadow-sm wp-post-image" alt="" loading="lazy" />
                                            </a>

                                        </div>
                                        <div class="text-center"
                                            style="width:100%;height: 1.6rem;border-radius: 0 0 .9rem  .9rem  ; background-color: #212529;; ">
                                            <i class="fa fa-star" style="color: rgba(241, 237, 237, 0.974); "
                                                aria-hidden="true"></i>
                                        </div>

                                        <div class="h5 mt-2  text-center" style="color:#333 ;">
                                            <!-- <a href="https://demo.ramsthemes.com/projects/ingmarwp/movies/la-la-land/"
                                    style="color: #333;"> -->
                                            <span style="color: #333;">
                                                <%-item.movies[0].movieName%>
                                            </span>

                                        </div>

                                    </div>

                                    <!-- loop end -->
                                    <% }) %>
                            </div>
                        </div>
        </div>
    </div>```

Answer 1

I use some condition in end of the loop

<div class="carousel-inner pt-3 px-2"" role=" listbox">
  <% var i=0; %>
    <!-- looping data -->
    <% upcoming.forEach((item, inx) => { i++%>
      <% if (inx==0||inx%5==0) { %>
        <div class="<%= i === 1 ? " carousel-item active":"carousel-item" %>">
          <div class="row row-cols-5 ">
      <% } %>
        <div class="col clearfix">
          <div class=" card-img-top">
            <a href="/home/upcomingMovie/<%- item._id %> " class="imageoutlink">
              <img
                style="border-radius:.9rem .9rem 0 0;height: 19rem ; object-fit: cover;"
                src="http://localhost:3000/uploads/<%-item.images[0].image_url%> "
                class="img-fluid shadow-sm wp-post-image" alt=""
                loading="lazy"
              />
            </a>
          </div>
        <div
          class="text-center"
          style="width:100%;height:1.6rem;border-radius:0 0 .9rem .9rem; background-color: #212529;"
        >
          <i class="fa fa-star" style="color: rgba(241, 237, 237, 0.974);"
            aria-hidden="true">
          </i>
        </div>

        <div class="h5 mt-2  text-center" style="color:#333;">
          <span style="color: #333;">
            <%-item.movieName%>
          </span>
        </div>
      </div>

      <% if ((i % 5) == 0) { %>
        </div></div>
      <% } %>
    <!-- loop end -->
    <% }) %>
</div>