Hi All,
i have a custom multi field which stores values in below structure.

and i am trying to get the values as below in my htl file. i am iterating a list of carousel- item0 , item1 and the inside cta-item0, item1.
The issue is my htl component should show cta-item0 for carousel item 0 and accordingly for second carousel too ,
but shows second cta - item0 and item1 only from second carousel item.
<sly data-sly-test="${column.carouselList}" data-sly-list="${column.carouselList}">
<div class="slide">
${item.carouselText @ context='html'}
<sly data-sly-test="${column.ctaList}" data-sly-list="${column.ctaList}">
<a data-sly-test="${item.linkText}" href="${item.linkUrl}" data-sly-text="${item.linkText}" class="${item.linkClass @ context = 'styleString'}" target="${item.linkTarget ? '_blank':''}">
</a>
</sly>
</div>
</sly>
my sling model logic is

public List<SBean> getCtaList() {
return ctaList;
}
public List<SBean> getCarouselList() {
return carouselList;
}