Repeater in repeater

[kyKaq]

Good day, I have created a repeater. Then I wanted to create create a repeater ion top of it.

This is my current code:
<section class=“module”>
<div class=“columns-wrapper”>
{% for item in module.card_item %}
<div class=“card-item”>
<div class=“card”>
{% if item.card_image.src %}
<div class=“card-img-top” style=“background:url(‘{{ item.card_image.src }}’) no-repeat; background-size: cover; background-position: center;”></div>
{% endif %}
<div class=“card-body”>
<h2 class=“card-title”>{{ item.card_title }}</h2>
<div class=“card-text”>
{{ item.card_text }}
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</section>

Then I wanted to create in inside the repeater:
<section class=“module-{{ name }}”>
{% for item in module.repeater %}
<div class=“columns-wrapper”>
{% for item2 in item.card_item %}
<div class=“card-item” style=“margin: {{ item.setting.padding_size }}px;”>
<div class=“card”>
{% if item2.card_image.src %}
<div class=“card-img-top” style=“background:url(‘{{ item2.card_image.src }}’) no-repeat; background-size: cover; background-position: center;”></div>
{% endif %}
<div class=“card-body”>
<h2 class=“card-title”>{{ item2.card_title }}</h2>
<div class=“card-text”>
{{ item2.card_text }}
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endfor %}
</section>

But then erorr occur as it show like this

[dennisedson]

Hi @kyKaq ,

Thanks for the question

Wondering if @jonchim or @dbeau79 have some ideas about this

[dbeau79]

@dennisedson thanks for tagging me.

@kyKaq can you post in your html and screenshot the field section in your module? I’m thinking you might not have your second repeater nested in your first repeater properly. There’s no issue with what you are trying to do. It should work.

[kyKaq]

Hi, @dbeau79 .
I had successfully added the repeater. However, I am now facing the problem of the setting.
However, a new problem is faced. I wanted to enable it to able to customize each of the repeaters. but, the new problem I face is I am unable to edit through the first repeater. And when I edit in the second repeater It will affect the first repeater as well. How can I do so that I can customize each of the repeaters?
This is my code:

<section class=“module”>
<div class=“repeater-wrapper-{{ id }}”>
{% for item in module.repeater %}
<div class=" columns-wrapper-{{ name }}“>
{% for item2 in item.card_item %}
<div class=“card-item” style=“margin: {{ item.setting.padding_size }}px;”>
<div class=“card”>
{% if item2.card_image.src %}
<div class=“card-img-top” style=“background:url(‘{{ item2.card_image.src }}’) no-repeat; background-size: cover; background-position: center;”></div>
{% endif %}
<div class=“card-body”>
<h2 class=“card-title”>{{ item2.card_title }}</h2>
<div class=“card-text”>
{{ item2.card_text }}
</div>
</div>
<div class=“card-url”>
<div class=“card-button”>
{% cta guid=”{{ item2.cta_field }}" %}
</div>
</div>
</div>
</div>
{% endfor %}
</div>

<style>
section.module .repeater-wrapper-{{ id }} {
top:-{{ item.overlay_on_top_setting.index_to_move_top }}px;
padding-top:{{ item.setting.distance_above }}px;
padding: 50px 0;
max-width:100%;
Z-index:1000;
}
section.module .repeater-wrapper-{{ id }} .columns-wrapper-{{ name }} {
display: flex;
flex-wrap: wrap;
max-width: 100%;
top:-{{ item.overlay_on_top_setting.index_to_move_top }}px;
position:{{ item.overlay_on_top_setting.overlay_on_top_element }};
padding-top:{{ item.setting.distance_above }}px;
}
section.module .repeater-wrapper-{{ id }} .columns-wrapper-{{ name }} .card-item {
display: flex;
flex-wrap: wrap;
max-width: 100%;
box-shadow: 5px 5px 2px 0 rgba(0, 0, 0, 0.2);
width:{{ item.setting.card_size }}%;
border-radius: {{ item.setting.card_corner }}px;
box-shadow: {{ item.setting_of_shadow.shadow_move_right }}px {{ item.setting_of_shadow.shadow_move_bottom }}px {{ item.setting_of_shadow.blurity_of_shadow }}px 0 rgba(0, 0, 0, 0.{{ item.setting_of_shadow.darkness_of_shadow }});
background-color:{{ item.setting.card_background_colour.color }};
position: relative;
overflow: hidden;
height: 100%;
text-align: left;

}
</style>
{% endfor %}
</div>
</section>

And this is the image of my module:

[jonchim]

Hi @kyKaq ,

Can you also provide us with a screenshot of the fields you have on the right side?
Looks like you might be missing an {% endfor %} and a closing </div>

[kyKaq]

Hi @jonchim

This is the right side of my module

And one more things that I just notice is that the unique id for the element is duplicate, maybe that is my problem.

[jonchim]

Hi @kyKaq ,

Thank you for the screenshots, I see that you have multiple groups within the initial repeater group. I think you need all those sub groups with the card settings to group inside the card_item group maybe another field called card_settings. Because you want those card settings to only affect the current card item but right now it’s affecting all the cards the same way?

[kyKaq]

I found the solution myself, the {{ name }} will return the same id every time. Then I change to {{ loop.index }}, it gives me a different unique id every time.
But I also want to thanks for your help.