Don't know what I am doing wrong in below code in twig for counter

Question

Counter always printing 1

{% if label_hidden %}
    {% if multiple %}
        {% for item in items %}
            {{ item.content }}
        {% endfor %}
    {% else %}
        /* counter set below for incriment */
        {% set counter = 1 %}
        {% for item in items %}
            {{ counter }}

            /* condition  check*/
            {% if counter == 2 %}
                <div class="spectra-promo col-md-6 spectra-offer-info">
                <h3>{{ item.content }}</h3>
            {% endif %}

            /* condition  check*/
            {% if counter == 3 %}
                <h5>{{ item.content }}</h5>
                <div class="choose-offer">
                <div class="left-sec">
            {% endif %}

            /* condition  check*/
            {% if counter == 4 %}
                <p>{{ item.content }}</p>
                <div class="right-sec">
                <p><a href="javascript:;"><i class="fa fa-angle-right" aria-                       hidden="true"></i></a></p>
                </div>
                </div>
                </div>
            {% endif %}

            /* counter increment below */
            {% set counter = counter + 1 %}
        {% endfor %}
    {% endif %}
{% endif %}

Answer 1

Instead of creating a counter, you can directly use the loop variable:

{% if label_hidden %}
    {% if multiple %}
        {% for item in items %}
            {{ item.content }}
        {% endfor %}
    {% else %}
        {% for item in items %}
            {{ loop.index }}

            /* condition  check*/
            {% if loop.index == 2 %}
                <div class="spectra-promo col-md-6 spectra-offer-info">
                <h3>{{ item.content }}</h3>
            {% endif %}

            /* condition  check*/
            {% if loop.index == 3 %}
                <h5>{{ item.content }}</h5>
                <div class="choose-offer">
                <div class="left-sec">
            {% endif %}

            /* condition  check*/
            {% if loop.index == 4 %}
                <p>{{ item.content }}</p>
                <div class="right-sec">
                <p><a href="javascript:;"><i class="fa fa-angle-right" aria-                       hidden="true"></i></a></p>
                </div>
                </div>
                </div>
            {% endif %}
        {% endfor %}
    {% endif %}
{% endif %}