How to have dynamic placeholders within the for loop?

Question

I am trying to make the dynamic placeholders with different numbers in the for loop. Now when I make the placeholder I only get the same name and number at the end (test-1-1). How to make it so that inside the for loop I have the dynamic placeholders. I am also using Promo rendering.

This is the code:

{{for i_child in i_item.children}}
<div class="section anchor-header" id="{{i_child.Anchor.raw}}">
<div class="container">
    <div class="row">
        <div class="col">
            <h2 class="anchor-header-title">
                {{i_child.Name}}
            </h2>
            <button type="button" class="anchor-header-button anchor-link">
                <svg class="icon icon-arrow" aria-hidden="true">
                    <use xlink:href="#icon-arrow"></use>
                </svg>
                TOP
            </button>
        </div>
    </div>
</div>

</div>
{{sc_placeholder 'test*'}} //this is the placeholder
{{end}}

Answer 1

I was also facing the same issue, not sure it's a Sitecore issue or not, every time you create a dynamic placeholder with * in a loop it will create with ex: test-1-1 only. And the worst part is, when you add any rendering in any one of the placeholders it will create a duplicate in all the placeholders.

My suggestion will be, to create a placeholder without * and add an index with the name of the placeholder ex: {{sc_placeholder 'test_' + Index of the item}}.

Hope it will work.

Answer 2

You can declare index with 0 and then increment it by 1 and need to append index with placeholder name like below:

{{index = 0}}
{{for i_child in i_item.children}}
<div class="section anchor-header" id="{{i_child.Anchor.raw}}">
<div class="container">
    <div class="row">
        <div class="col">
            <h2 class="anchor-header-title">
                {{i_child.Name}}
            </h2>
            <button type="button" class="anchor-header-button anchor-link">
                <svg class="icon icon-arrow" aria-hidden="true">
                    <use xlink:href="#icon-arrow"></use>
                </svg>
                TOP
            </button>
        </div>
    </div>
</div>

</div>
{{index = index + 1}}
{{sc_placeholder 'test-' + index}}
{{end}}