On my form when a user clicks on a button a new input field will be added. I need to validate in when user presses submit button without filling the date. (Its a datepicker ). Am not sure whats wrong,

Here is my code:

var room = 0;
function room_fields() {

    room++;
    var objTo = document.getElementById('room_fields')
    var divtest = document.createElement("div");
    divtest.setAttribute("class", "row removeclass"+room);
    var rdiv = 'removeclass'+room;
    divtest.innerHTML = '<div class="col-5 form-group"><div class="form-control-wrap"><div class="form-icon form-icon-left"><em class="icon ni ni-calendar"></em></div><input type="text" class="form-control date-picker" data-date-format="yyyy-mm-dd" placeholder="Select Intake date" name="selected_intakes" id="selected_intakes_'+room+'"></div></div><div class="col-2 form-group"><input type="button" class="btn btn-danger" value="-" onclick="remove_education_fields('+ room +');"></div>';
    
    objTo.appendChild(divtest)

    setTimeout(function(){
        $("#selected_intakes_"+room).datepicker();
        $("#selected_dates_"+room).datepicker();
        $('#selected_dates_'+room).rules('add', {
            required: true,
        });
    }, 50);
}
   function remove_education_fields(rid) {
       $('.removeclass'+rid).remove();
   }

My input:

<input type="text" class="form-control date-picker" data-date-format="yyyy-mm-dd" name="selected_dates" id="selected_dates_{{counter}}">
<input type="button" class="btn btn-primary" value="+" onclick="room_fields();">

So from the above, when user press button, room_fields is called and new field is added. And i am adding rules also. But sadly my form is not getting validated.

And note: I cant use dynamic names, instead am using dynamic id's

Please help