Add multiple dynamic picker component

Questions
1

Hi, I create multiple field using F7 core.

// my components loop
${pickers.value.map((key) => $h`
<div class="block-title">Datepicker 1</div>
<div class="list inset inline-labels no-margin-left no-margin-right">
    <ul>
        <li>
            <div class="item-content item-input">
                <div class="item-inner">
                <div class="item-input-wrap">
                    <input class="datepicker" type="text" name="dt_${key}" placeholder="DD MMMM YYYY" readonly="readonly" data-error-message="required" required validate/>
                </div>
                </div>
            </div>
        </li>
    </ul>
</div>
<button id="btn-add" class="button button-raised button-fill" @click="${addDatepicker}"><span><i class="icon f7-icons">plus</i> Add New</span></button>

<script>
export default (props, { $, $f7, $f7router, $on, $update,  $ref, $store, $tick }) => {
    const pickers = $ref([]);
    const pickerIntances = $ref({});
    const key = $ref(0)

    const addDatepicker = () => {
          pickers.value = pickers.value.concat(key.value);

          let elInput = $(`[name="dt_${key.value}"]`)[0];

          // create datepicker ==> https://framework7.io/docs/picker.html#examples

          key.value++
    }
})
</script>

first time I click add new picker button, it works correctly, but second time and so on, the first picker not working anymore, I checked the instance, everytime pickers.value changed, the first picker instance view has change and assigned to main view not the current view (mypicker-view) like when the initial instance created

any idea?

2

it’s working now, a bit tricky since I need to use $update to get the DOM updated first, in $update() callback I get all the datepicker input elements, loop it and create the instance