Jsp custom tags get replaced with html content in wrong order

I have learned in last class that jsp's custom tags are replaced with html content after evaluation of custom tag.

But putting this concept in practice, I faced following problem. I have 3 div inside a jsp , 2 of them are static and middle div has a custom tag in it. So html content generated by middle div's custom tag should be replaced in middle div only.

But, output suggests something else, please point me out if there is something wrong with the code, or the statement used in starting of question needs some modification.

home.jsp

<div style="height: 80px; background-color: #FFA500;">
    <%@ include file="banner.html"%>
</div>  

<div style="height: 450px;">
    <connect:dbConnector user="root" password="" url="jdbc:mysql://localhost/musicstore" scope="session">
    </connect:dbConnector>

        <connect:Query where="select * from musicstore.songs;">
            <ui:addTable name="musicList">
                <c:forEach var="value" items="${result }">
                    <c:set scope="session" var="currentRow" value="${value }"></c:set>
                    <ui:addRow data="currentRow" scope="session">
                    </ui:addRow>
                </c:forEach>
            </ui:addTable>
        </connect:Query>
</div>

<div style="height: 80px; background-color: #FFA500;">Footer
    content</div>

html content that i can see on web browser are

<table border="1" name=" musicList ">
    <tr>    <td>Tum hi ho</td>
        <td>Arjit Singh</td>
        <td>45</td></tr>
    <tr>    <td>Manjha</td>
        <td>Amit Trivedi</td>
        <td>30</td></tr>
    <tr>    <td>Ranjhanna</td>
        <td>A.R Rehman</td>
        <td>25</td></tr>
    <tr>    <td>Sawar Loon</td>
        <td>Monali Thankur</td>
        <td>20</td></tr>
</table>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
    <div style="height: 80px; background-color: #FFA500;">
<img src="/WEB-INF/resources/music_banner.png" ></img>
    </div>  
    
    <div style="height: 450px;">
        
    </div>
    
    <div style="height: 80px; background-color: #FFA500;">Footer
        content</div>
</body>
</html>

AddRowTag.java

public class AddRowTag extends TagSupport {
        // some getter, setter and other utility methods here.
@Override
public int doStartTag() throws JspException {
    try {
        System.out.println("AddRowTag--> doStartTag");
        Row content = getDataToDisplay();
        StringBuilder htmlContent = new StringBuilder();
        
        htmlContent.append(startTableRow);
                    
        htmlContent.append(startTableData);
        htmlContent.append(content.getTitle());
        htmlContent.append(endableData);
        
        htmlContent.append(startTableData);
        htmlContent.append(content.getArtist());
        htmlContent.append(endableData);

        htmlContent.append(startTableData);
        htmlContent.append(content.getPrice());
        htmlContent.append(endableData);

        htmlContent.append(endableRow);

        System.out.println(htmlContent.toString());
        pageContext.getResponse().getWriter().print(htmlContent);
    } catch (IOException e) {
        e.printStackTrace();
    }
    return SKIP_BODY;
}

}

Summarizing the problem:

Where(in context of location of placement of converted code(html code)) jsp custom tag code is placed in final html file.
What I need to modify in my current my current jsp code, if I want middle div should be updated on basis of custom tag.

Any suggestion/explanation is will be highly appreciated.

Solution

The tag should not write to the response directly. By doing that, it bypasses the JspWriter, which also writes to the response but buffers its output.

Replace

pageContext.getResponse().getWriter().print(htmlContent);

pageContext.getOut().print(htmlContent);