How to have several datepickers on same HTML page

[rogerte]

During this lockdown period I have decided to help a local sports charity by finishing-off an online management system written using, primarily bootstrap 4 and php.

One thing I want to do is a system to set up dates that sessions will be available for forthcoming term. So I set up a form with 6 inputs, one for each day Mon - Sat. I have then looked for a data picker add-in that allows multi dates to be picked. I came across 2 jquery ones that should work: Bootstrap-Datepicker that doesn't seem to work with Bootstrap 4 and Tempusdominus which I am trying to use.

Being completely new to, and not understanding javascript/jquery, I cannot see how to have more than one such datepicker on a single page.

I have used the code for Tempusdominus as on their examples page, but don't understand how to link a separate datepicker to each input.

For each edit/picker the code is:

                                <label class="col-md-2 control-label" for="monclasses">Monday:</label>  
                                <div class="col-md-9">
                                    <div class="input-group date" id="datetimepicker14" data-target-input="monclasses">
                                        <input id="monclasses" type="text" class="form-control datetimepicker-input" data-target="#datetimepicker14"/>
                                        <div class="input-group-append" data-target="#datetimepicker14" data-toggle="datetimepicker">
                                            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-1"></div>

The only difference, at the moment, is that each day input has a different id ("monclasses" in the above example)

<script type="text/javascript">
            $(function () {
                $('#datetimepicker14').datetimepicker({
                    allowMultidate: true,
                    multidateSeparator: ','
                });
            });
        </script>

Any help thankfully received!

 

[rogerte]

Finally found a completely different way of doing this so please ignore this question