Radio button not working with jquery repeater

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.

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/