Html calendar component Issue in for Loop

I have created a function to add more rows. please refer the image link added here . when the page loads there will be only 1 row. When I add more rows , Calendar component is not displayed properly. I have shown the issue in the image ,check the image link. see the calander icon. it will not display the date picker from 2nd row onwards https://i.stack.imgur.com/xB4Sg.png

Here Is my code:

<div *ngFor="let criteria of allocationFormLongBooking.get('avvikandeDates')['controls']; let k= index;">
    <div class="row " [formGroupName]="k">
        <div class="col-12 col-sm-3 col-md-2 col-lg-2 pr-0">
            <div class="form-group" > 
                <label for="avvikande-day" i18n="@@admin_cal_booking_info_new_dt">Date</label>  
                <input type="text" id="avvikandera-date" (change)="aonUpdateExcludeDate()" class="kendo-picker-2 w-100" style="height: 31px;" required pattern="^([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))$" placeholder="yyyy-mm-dd" />
            </div>
        </div>
        <div class="col-12 col-sm-3 col-md-3 col-lg-3 ml-3">
            <div class="form-group">
                <label for="avvikande-start-time" i18n="@@admin_cal_booking_info_new_dt">Start Time</label>                                
                <select placeholder="aa" class="form-control form-control-sm" formControlName="startTime" (change)="onStartTimeChange(criteria, $event.target.value,k)">
                    <option style="display:none"></option>
                    <option *ngFor="let ut of timeSlots" [ngValue]="ut.name" name="ut.name">
                        {{ut.name}}
                    </option>
                </select>
            </div>
        </div>
    </div>
</div>