cloneしたtr要素内でflatpickrが動作しない

Question

前提・実現したいこと

ボタンクリックでtableのtr要素をcloneして行追加を行ったとき、
追加された行にもflatpickr動作用のクラスが正しく付与されていることをDOM上から確認できるにもかかわらず、
clone元のtr要素内のflatpickrは動作しても、
cloneして追加したtr要素内ではflatpickrが動作しません。

追加した行でもflatpickrを動作させるにはどうしたら良いでしょうか。

該当のソースコード

<button type="button" id="add">行追加</button>
<table>
    <tr><td><div class="flatpickr"><input type="text" value="コピー元行"></div></td></tr>
</table>

set_f();

function set_f(){
    flatpickr(".flatpickr", {});
}

$(document).on('click', '#add', function(){
    $('table tr:first-child').clone(true).appendTo('table tbody');
});

試したこと

行を追加する毎にset_f関数を呼び出すようにすると表面上は正しく動作するようになりますが、
行を追加するたびに既に入力済みの行の日付データが全てクリアされてしまいますので、
この方法では要件を満たしません。

Answer 1

あとから動的に追加したDOM要素には、その都度JavaScriptの設定をしなければなりません。

[1] 読み込み時のHTMLをみて、flatpickr (プラグイン?) がそのとき存在するDOM要素へJavaScript的な挙動を追加
↓
[2] 動的にDOM要素を追加 ←DOM要素を追加しただけでは、「1.」で行ったJavaScript的な挙動が追加されていない。
↓
[3] 追加したDOM要素に、「1.」で行ったように「JavaScript的な挙動を追加」を行う。
こちらのような記述だと思います: flatpickr("追加した要素", {});

あるいは、このあたりが参考になるかもしれません
https://qiita.com/shizuma/items/d561f37f864c3ebb5096

Answer 2

「試したこと」に記入した方法を改良して解決しました。

この質問は、cloneでイベントごとコピーしたとき、
他のイベントはコピーできるのにflatpickrのイベントだけがコピーできないのが何故なのか
疑問に思ったからの投稿でした。
回答を得られなかったので、おそらくそういう仕様なのだと解釈しました。