Jquery Validation not working to an input field that's not exist when document ready

Question

currently i'm working with Jquery validation. It's working well when form is ready.

But when i try to add new field there with the same name by click button. the validation is not working.

<form id="formInput" autocomplete="off">
       <div class="col-md-4 col-xs-4 mt-2 mb-2">
            <input type="text" class="form-control hoho" name="name[]" id="name" value="{{ $registData->company_name ?? '' }}" placeholder="input name">
       </div>

       <div class="col-md-4 col-xs-4 mt-2 mb-2">
            <input type="text" class="form-control hoho" name="name[]" id="name" value="{{ $registData->company_name ?? '' }}" placeholder="input name">
       </div>
<button type="button" class="addnew">
</form>

e.g. there are two input with the same name directly up there on doc ready. when form submit, both input field is being validated.

Then i press add new button to add more input with the same name. The last input is not validated

try to re-validate when button addnew press but not working

 $(".addnew").on('click', function(e) {
                ...
                $("#formInput").validate({
                rules: {
                    'name[]': {
                        required: true,
                       
                    },
                }
                messages: {
                    'name[]': {
                        required: defaultMessageError
                    },

                }
            });

I expect the form is validate correctly when form input is edited