​

const wrapper = document.querySelector('.wrapper');

const btn = document.querySelector('.btn');

const elementsString = `

<div class="form-outline">

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

  <label class="form-label" for="form12">Example label</label>

</div>

<div class="form-outline datepicker mt-5">

  <input

    type="text"

    class="form-control"

    id="exampleDatepicker11"

  />

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

</div>

`;

btn.addEventListener('click', () => {

  wrapper.insertAdjacentHTML( 'beforeend', elementsString);

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

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

  });

  const myDatepicker = new mdb.Datepicker(document.querySelector('.datepicker'))

})

​