I use Tailwind Elements library with Tailwind CSS in my project. Everything works perfectly, but there is one problem appeared... because I'm trying to clone the element and add to the page a copy.
I do the clone of a form with cloneNode method like this:
<template id="temp">
<form>
<div class="datepicker relative mb-3" data-mdb-toggle-button="false">
<input type="text" placeholder="Select a date" data-mdb-toggle="datepicker" />
<label class="text-gray-700">Select a date</label>
</div>
</form>
</template>
import 'tw-elements'
let newForm = document.querySelector("#temp").content.cloneNode(true); // clone the <form>
newForm.appendChild(document.body); // add to the <body>
After these manipulations the new form added to the page, but the Datepicker does not work. As I understood, I should call the initialization of the element programmably via JS like this:
let datePicker = newForm.querySelect('.datepicker');
datePicker.tweDatePicker(); // smth like that maybe
Right? But how? I cannot find in the docs how to call and init the Datepicker (or any other component) via vanilla JS programmably? Maybe you know the better approaches.