​

const container = document.getElementById('container')

container.insertAdjacentHTML('afterend', 

`<div class="form-outline my-3" id="exampleDatepicker">

  <input type="text" class="form-control"  />

  <label for="exampleDatepicker11" class="form-label">Select a date</label>

</div>

​

  <select id="exampleSelect">

    <option value="1">One</option>

    <option value="2">Two</option>

    <option value="3">Three</option>

    <option value="4">Four</option>

    <option value="5">Five</option>

    <option value="6">Six</option>

    <option value="7">Seven</option>

    <option value="8">Eight</option>

  </select>

  <label class="form-label select-label">Example label</label>`);

​

const datepicker = document.getElementById('exampleDatepicker')

const select = document.getElementById('exampleSelect')

​

​

const myDatepicker = new mdb.Datepicker(datepicker)

const mySelect = new mdb.Select(select)

​

document.querySelectorAll('.form-outline').forEach((formOutline) => {

  new mdb.Input(formOutline).init();

});