I am trying to have a form input where I can select a start date and an end date. I want to be able to have two form input boxes on the same page which both allow me to utilise the datepicker module; however, the datepicker calendar only appears on one of the boxes and not both.

When I have both input groups in the html, the datepicker calendar only appears in the first one and not the second. However, if I comment out the first input-group, the calendar will then appear in the second box; hence, I do not think there is a problem with the html code.

        <div class="col-xl-3 col-lg-6 col-md-12 my-2">
            <div class="input-group shadow-lg form-outline datepicker-with-limits" data-mdb-toggle-button="false" data-mdb-format="yyyy-mm-dd">
                <span class="input-group-text py-4 bg-primary text-white">Start date:</span>
                <input type="text" class="form-control" id="start-datepicker" name="start-year" data-mdb-toggle="datepicker">
                <label for="start-datepicker" class="form-label">Select a start date</label>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-md-12 my-2">
            <div class="input-group shadow-lg form-outline datepicker-with-limits" data-mdb-toggle-button="false" data-mdb-format="yyyy-mm-dd">
                <span class="input-group-text py-4 bg-primary text-white">End date:</span>
                <input type="text" class="form-control" id="end-datepicker" name="end-year" data-mdb-toggle="datepicker">
                <label for="end-datepicker" class="form-label">Select a end date</label>
            </div>                
        </div>