Jquery validation not working for second row in table

问题

Issue Details

I am adding the rows dynamically. Code is inside JQuery steps. Jquery validation is working on first row in table but not on second row in table. I meant, when I click next without typing anything, it shows the tab as red color. But this is not happening for second row in table.

Am I missing anything?

JS Fiddle Link for demo

HTML

<div class="container-fluid">       
    <div class="row">                   
        <main role="main" class="col-md-12 pt-3 px-4">
            <h1 style="text-align:center;">Form</h1>
            <form id="form">                
                <h2>Tab 1</h2>
                <section>
                    <div style="padding-top:10px; padding-bottom:10px; display: flex; align-items: right;">
                        <input type="button" class="btn btn-info" onclick="AddNew();" value="Add New Item">
                    </div>
                    <div class="row">
                        <table class="table table-bordered" id="tbl">
                            <thead class="order">
                                <tr>
                                    <th>Item ID#</th>
                                </tr>
                            </thead>
                            <tbody>                                                                         
                            </tbody>
                        </table>
                    </div>
                </section>
                <h2>Tab 2</h2>
                <section>
                </section>
            </form> 
        </main>
    </div>
</div>

JS

var form = $("#seller-form");
AddNew();

form.steps({
    headerTag: "h2",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    stepsOrientation: "horizontal",
    onStepChanging: function (event, currentIndex, newIndex)
    {
        form.validate().settings.ignore = ":disabled,:hidden";
        return form.valid();
    },
    onFinished: function (event, currentIndex)
    {
    }
}).validate({
    rules: {                
        'item_no[]': {
            required: true
        }
    }
});

var rowid = 0;
function AddNew() {     
    var data = "<tr>";
    data += "<td data-th='Item ID#'><input type='text' id='item_no[" + rowid + "]' name='item_no[]' class='form-control required'/></td>";
    data += "</tr>";            
    $("#tbl tbody").append(data);
    rowid++;
}

来源：https://stackoverflow.com/questions/60785395/jquery-validation-not-working-for-second-row-in-table