jQuery – increment inside .each() function not working

June 4, 2022

I’m trying to add an unique id attribute with incremented value number to all radio buttons and also for attribute to all labels. This is not working:

$(document).ready(function() {
    var i = 0;

    $('.wpcf7-radio .wpcf7-list-item').each(function() {
        i++;

        $('.wpcf7-radio .wpcf7-list-item input').attr('id', 'radio-' + i);
        $('.wpcf7-radio .wpcf7-list-item .wpcf7-list-item-label').attr('for', 'radio-' + i);                    
    });
});

This is output HTML:

<span class="wpcf7-form-control wpcf7-radio">
    <span class="wpcf7-list-item first">
        <input type="radio" name="moznost-typ-projektu" value="Nový projekt" checked="checked" id="radio-5" />
        <label class="wpcf7-list-item-label" for="radio-5">Nový projekt</label>
    </span>

    <span class="wpcf7-list-item">
        <input type="radio" name="moznost-typ-projektu" value="Prerábka / redizajn existujúceho projektu" id="radio-5" />
        <label class="wpcf7-list-item-label" for="radio-5">Redizajn</label>
    </span>

    <span class="wpcf7-list-item last">
        <input type="radio" name="moznost-typ-projektu" value="Niečo iné" id="radio-5" />
        <label class="wpcf7-list-item-label" for="radio-5">Niečo iné</label>
    </span>
</span>

>Solution :

You can try it :

$(document).ready(function() {
    var i = 0;

    $('.wpcf7-radio .wpcf7-list-item').each(function() {
        i++;
        $(this).find('input').attr('id', 'radio-' + i);
        $(this).find('label').attr('for', 'radio-' + i);                    
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="wpcf7-form-control wpcf7-radio">
    <span class="wpcf7-list-item first">
        <input type="radio" name="moznost-typ-projektu" value="Nový projekt" checked="checked" id="radio-5" />
        <label class="wpcf7-list-item-label" for="radio-5">Nový projekt</label>
    </span>

    <span class="wpcf7-list-item">
        <input type="radio" name="moznost-typ-projektu" value="Prerábka / redizajn existujúceho projektu" id="radio-5" />
        <label class="wpcf7-list-item-label" for="radio-5">Redizajn</label>
    </span>

    <span class="wpcf7-list-item last">
        <input type="radio" name="moznost-typ-projektu" value="Niečo iné" id="radio-5" />
        <label class="wpcf7-list-item-label" for="radio-5">Niečo iné</label>
    </span>
</span>

in your code, in every loop, you changed id and for of all elements

.wpcf7-radio .wpcf7-list-item input is 3 elements input

.wpcf7-radio .wpcf7-list-item label is 3 elements label