How to display child pages of child page of current page in sightly in aem?

I am trying to get the output as follows:- pic-1 .... required ouput

i am writing the following snippet for the footer component-

<div class="ftrsection" data-sly-repeat="${currentPage.listChildren}">
				<h3 data-sly-test.child="${item.title}" >${child}</h3>      
				<ul class="footermenu">
					<li data-sly-repeat.child1="${currentPage.listChildren}">
						<a href="${item.path}.html" title="${item.title}" class="">${child1.title}</a> 
					</li>        

				</ul>
			</div>

And i am geeting the following output-Generated output.

The structure of my site in aem is Site structure in aem.

I am trying to get the child pages of the child pages of the root page.

The first level child pages ( Explore, Experience, Stay, Taste, This Is Bhubaneswar) should be headers of the footer as in pic-2. And the child pages( level 2)( Heritage Circuits, Temples) in those child pages(level 1)(Explore) should be under them. But i am getting the wrong output.

Solution

Your second iteration (data-sly-repeat) is listing the children of the current page again. I believe you want to list subpages of the current item:

<div class="ftrsection" data-sly-repeat="${currentPage.listChildren}">
                <h3 data-sly-test.child="${item.title}" >${child}</h3>      
                <ul class="footermenu">
                    <li data-sly-repeat.subpage="${item.listChildren}">
                        <a href="${subpage.path}.html" title="${subpage.title}" class="">${subpage.title}</a> 
                    </li>        

                </ul>
            </div>