the content that is rendered by iterating through ejs and the content rendered by the html elements placed after ejs content get over each other

Question

    <form id="selected-task-is" action="/user/delete" method="post">
        <div class="added-task">
            <ul class="task-list">
                <% for(let i of task){%>
                    <li class="task-list-items">

                        <!-- CHECKBOX  -->
                        <div class="checkbox-container">
                            <input id="checkbox" type="checkbox" name="id" value="<%= i.id%>">
                        </div>

                        <div class="display-task">

                            <!-- DISCRIPTION DISPLAY  -->
                            <p class="display-desc">
                                <%= i.description%>
                            </p>

                            <!-- DATE DISPLAY  -->
                            <p class="display-d_date">
                                <i class="fa-regular fa-calendar"></i>

                                <!-- FORMATTING DATE INTO CORRECT FORMAT  -->

                                <%{%>
                                    <% let m=["January", "February" , "March" , "April" , "May" , "June" , "July"
                                        , "August" , "September" , "October" , "November" , "December" ]; %>
                                        <%= m[i.d_date.getMonth()]%>
                                            <%= i.d_date.getDate()%>,
                                                <%= i.d_date.getFullYear()%>
                                                    <%}%>

                            </p>
                            </div>
                            <!-- CATEGORY DISPLAY  -->

                            <div class="category-container">
                            <%if(i.category!=null){%>
                                <p class="display-category">
                                    <span class="category-type">
                                        <%= i.category%>
                                    </span>
                                </p>
                                <%}%>
                        </div>
                    </li>
                    <%} %>
            </ul>
        </div>
    </form>
    <p>after ejs content</p>

    <!-- ADDING JAVASCRIPT ASSET  -->

    <script type="text/javascript" src="/js/index.js"></script>

    <!-- ADDING FONTAWESOME AS SCRIPT  -->

    <script src="https://kit.fontawesome.com/e784f7575e.js" crossorigin="anonymous"></script>
</body>

type here

the content that is rendered by iterating through ejs and the content rendered by the html elements placed after ejs content get over each other I am trying that the content written by after ejs content should come after my complete ejs has rendered