Validate cloned checkboxes and radio buttons using jquery
<p>I'm trying to validate cloned form elements using JQuery. Following is my code:</p>

<p>HTML:</p>

<pre><code>&lt;form class="form-inline"&gt;

        &lt;div class="panel panel-default"&gt;

            &lt;div class="panel panel-heading"&gt;
                Yii2 Form Clone Html                
                &lt;a href="#" class="add btn btn-sm btn-success pull-right"&gt;Add&lt;/a&gt;                
            &lt;/div&gt;

            &lt;div class="panel panel-body"&gt;

                &lt;div class="form-section"&gt;

                    &lt;div class="row" style="margin-top: 20px;"&gt;
                        &lt;div class="col-md-3"&gt;
                            &lt;div class="form-group"&gt;                
                                &lt;input type="text" class="name form-control" placeholder="Username" id="name" name="username[]"&gt;                                
                                &lt;span class="error"&gt;&lt;/span&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;

                        &lt;div class="col-md-2"&gt;
                            &lt;div class="form-group"&gt;                
                                &lt;select name="city[]" class="form-control" class="city" id="city"&gt;
                                    &lt;option value=""&gt;Select City&lt;/option&gt;
                                    &lt;option value="Pune"&gt;Pune&lt;/option&gt;
                                    &lt;option value="Mumbai"&gt;Mumbai&lt;/option&gt;                        
                                &lt;/select&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;

                        &lt;div class="col-md-2"&gt;
                            &lt;div class="form-group"&gt;
                                &lt;label class="checkbox-inline"&gt;
                                    &lt;input type="checkbox" class="edu" value="MBA" name="edu[0]" id="edu"&gt; MA
                                &lt;/label&gt;
                                &lt;label class="checkbox-inline"&gt;
                                    &lt;input type="checkbox" class="edu" value="MA" name="edu[0]" id="edu"&gt; MA
                                &lt;/label&gt;
                                &lt;span class="error"&gt;&lt;/span&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;

                        &lt;div class="col-md-2"&gt;
                            &lt;div class="form-group"&gt;
                                &lt;label class="radio-inline"&gt;
                                    &lt;input type="radio" name="gender[0]" id="gender" value="Male" class="gender"&gt; Male
                                &lt;/label&gt;
                                &lt;label class="radio-inline"&gt;
                                    &lt;input type="radio" name="gender[0]" id="gender" value="Female" class="gender"&gt; Female
                                &lt;/label&gt;                    
                                &lt;span class="error"&gt;&lt;/span&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;

                        &lt;div class="col-md-2"&gt;
                            &lt;div class="form-group"&gt;                
                                &lt;input type="file" placeholder="Name" name="photo[]" id="photo" class="photo"&gt;
                                &lt;span class="error"&gt;&lt;/span&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;


                    &lt;/div&gt;
                &lt;/div&gt;

            &lt;/div&gt;
        &lt;/div&gt;

        &lt;input type="submit" name="submit" value="Submit" class="submit btn btn-primary"&gt;

    &lt;/form&gt;
</code></pre>

<p>JQuery code:</p>

<pre><code>$(document).ready(function () {
        //Create a variable "clonedTemplate" 
        var clonedTemplate = $(".form-section .row:first").clone();
        var removeLink = "&lt;div class='col-md-1'&gt;&lt;div class='form-group pull-right'&gt;&lt;a href='#' class='btn btn-sm btn-danger delete'&gt;x&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;";
        var index = 0;


        $("body").on('click', '.add', function () {

            index++;
            var formSection = clonedTemplate.clone().find(':input').each(function () {
                var oldId = $(this).attr('id'); // getting "id" attribute
                var newId = oldId + "_" + index;  // generating new id
                $(this).attr('id', newId); // updating "id" field

                if ($(this).attr('type') === "radio") {
                    var prefix = "gender[" + index + "]";
                    $(this).attr('name', prefix); // updating "name" field
                }

                if ($(this).attr('type') === "checkbox") {
                    var prefix = "edu[" + index + "]";
                    $(this).attr('name', prefix); // updating "name" field
                }

            });

            formSection.end().appendTo('.form-section');
            $(".form-section .row:last").append(removeLink);

        });

        $("body").on("click", ".delete", function () {
            $(this).closest(".row").remove();
        });



        $("body").on("click", ".submit", function () {
            $(".form-section").find(":input").each(function (i) {
                var type = $(this).attr('type');
                //console.log(type);
                var errorTag = $(this).closest('.form-group').find('.error');
                var val = $(this).val();
                switch (type)
                {
                    case "text":
                        if (val === "")
                            errorTag.html("Username cannot be blank.");
                        else
                            errorTag.html("");
                        break;
                    case "file":
                        if (val === "")
                            errorTag.html("Photo cannot be blank.");
                        else
                            errorTag.html("");
                        break;
                    case "radio":
                        if ($(this).closest(".gender").prop('checked') !== true)
                            errorTag.html("Gender cannot be blank.");
                        else
                            errorTag.html("");
                        break;
                    case "checkbox":
                        if ($(this).closest(".edu").prop('checked') !== true)
                            errorTag.html("Education cannot be blank.");
                        else
                            errorTag.html("");
                        break;
                    default:
                        $(this).val("");
                }

            });
            return false;
        });

    });
</code></pre>

<p>I'm facing issue while validating cloned radiobuttons and checkboxes. Its only working when I'm selecting all radiobuttons/checkboxes or the last one. If I select first radiobutton/checkbox then its showing validation error.</p>

<p>I'm using jquery <code>closest()</code>here to validate it row wise as form is getting cloned (adding row) after clicking on "Add" button.</p>

<p>Check following fiddle:</p>

<p><a href="https://jsfiddle.net/KJO/6vLdzzq4/2/" rel="nofollow noreferrer">https://jsfiddle.net/KJO/6vLdzzq4/2/</a></p>

<p>Any help would be appreciated.</p>