Radio button not working with jquery repeater

Question

I've the following code for repeater field. All the input fields in the repeater field except the radio button are working.

<div data-repeater-item>
    <ul>
        <li>
            <div class="form-check form-check-inline">
                <div class="custom-radio">
                    <input class="form-check-input" type="radio" name="period_type" id="inlineRadio7" value="Month">
                    <label class="form-check-label" for="inlineRadio7">Month</label>
                </div>
            </div>
            <div class="form-check form-check-inline">
                <div class="custom-radio">
                    <input class="form-check-input" type="radio" name="period_type" id="inlineRadio8" value="Day">
                    <label class="form-check-label" for="inlineRadio8">Day</label>
                </div>
            </div>
        </li>
        <li>
            <input type="number" class="form-control" name="period" placeholder="00">
            <label class="form-check-label">Month</label>
        </li>
        <li>
            <label class="form-check-label">Default price
                <!--per Month--></label>
            <input type="number" class="form-control" name="default_price" placeholder="00,000">
        </li>
        <li>
            <label class="form-check-label">Discounted price
                <!--per Month--></label>
            <input type="number" class="form-control" name="discount_price" placeholder="00,000">
        </li>
        <li class="add-remove">
            <input class="remove" data-repeater-delete type="button" value="- Remove" />
        </li>
    </ul>
</div>   

When clicking the radio button of 2nd or the following radio buttons group, the first radio button group is changing (Because of the id that i've provided for the radio input i think ). How to make the radio buttons works too?
Any help will be greatly appreciated.

Answer 1

every row unique ID, lablefor & name val

    <div class="repeater">
    <div data-repeater-list="category-group">
        <div data-repeater-item>
            <input type="hidden" name="id" id="cat-id" />
            <ul>
                <li>
                    <div class="form-check form-check-inline">
                        <div class="custom-radio">
                            <label class="form-check-label">
                                <input class="form-check-input" type="radio" name="period_type" id="inlineRadio7" value="Month">
                                Month
                            </label>
                        </div>
                    </div>
                    <div class="form-check form-check-inline">
                        <div class="custom-radio">
                            <label class="form-check-label">
                                <input class="form-check-input" type="radio" name="period_type" id="inlineRadio8" value="Day">
                                Day
                            </label>
                        </div>
                    </div>
                </li>
                <li>
                    <input type="number" class="form-control" name="period" placeholder="00">
                    <label class="form-check-label">Month</label>
                </li>
                <li>
                    <label class="form-check-label">
                        Default price
                        <!--per Month-->
                    </label>
                    <input type="number" class="form-control" name="default_price" placeholder="00,000">
                </li>
                <li>
                    <label class="form-check-label">
                        Discounted price
                        <!--per Month-->
                    </label>
                    <input type="number" class="form-control" name="discount_price" placeholder="00,000">
                </li>
                <li class="add-remove">
                    <input class="remove" data-repeater-delete type="button" value="- Remove" />
                </li>
            </ul>
        </div>

    </div>
    <input data-repeater-create type="button" value="Add" />
</div>

JS

 $(document).ready(function () {
                'use strict';
                window.id = 0;

                $('.repeater').repeater(
                    {
                        defaultValues: {
                            'id': window.id,

                        },
                        show: function () {
                            $(this).slideDown();
                            console.log($(this).find('input')[1]);
                            $('#cat-id').val(window.id);
                        },
                        hide: function (deleteElement) {
                            if (confirm('Are you sure you want to delete this element?')) {
                                window.id--;
                                $('#cat-id').val(window.id);
                                $(this).slideUp(deleteElement);
                                console.log($('.repeater').repeaterVal());
                            }
                        },
                        ready: function (setIndexes) {
                        }
                    }
                );
            });

Use Custom Radio with bootstrap HTML

<label class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <span class="custom-control-label">Or toggle this other custom radio</span>
</label>
<label class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <span class="custom-control-label">Toggle this custom radio</span>
</label>

https://jsfiddle.net/lalji1051/034tp2ar/7/

Answer 2

You have given same name to radio buttons hence they work as a single group and hence whenever you click on one of them other will get de-selected.

You need to give different names to the radio button in different row to work independently

<!--- First row -->
    <div class="form-check form-check-inline">
        <div class="custom-radio">
           <input class="form-check-input" type="radio" 
                  name="period_type_7" id="inlineRadio7" value="Month">
           <label class="form-check-label" for="inlineRadio7">Month</label>
        </div>
    </div>
    <div class="form-check form-check-inline">
         <div class="custom-radio">
            <input class="form-check-input" type="radio" 
                   name="period_type_7" id="inlineRadio8" value="Day">
            <label class="form-check-label" for="inlineRadio8">Day</label>
         </div>
    </div>

   <!--- Second row -->
<div class="form-check form-check-inline">
        <div class="custom-radio">
           <input class="form-check-input" type="radio" 
                  name="period_type_9" id="inlineRadio9" value="Month">
           <label class="form-check-label" for="inlineRadio9">Month</label>
        </div>
    </div>
    <div class="form-check form-check-inline">
         <div class="custom-radio">
            <input class="form-check-input" type="radio" 
                   name="period_type_9" id="inlineRadio10" value="Day">
            <label class="form-check-label" for="inlineRadio10">Day</label>
         </div>
    </div>

Answer 3

You may use jquery to replicate Items and get them using class index like:

var repeater = doucument.getElementsByClassName('class-name');

And get using

repeater[index]; 

I have tested the code in the following link: https://www.jqueryscript.net/form/Form-Fields-Repeater.html