I'm trying to create multiple time picker, however it is working fine for the first input field (id="time-pickable")

I'm trying to create multiple time picker, however it is working fine for the first input field (id="time-pickable"). But as soon as I click on add button input field is created but the JS function won't work. ID for input field is incrementing but the JS Part isn't working.

In case any JS guru can help me please.

HTML PART:-

    <div class="time">
        <h5>Time</h5>
        <input type="text" class="time-pickable"  readonly>
        <i class="fa fa-plus" id="add_time_btn" onclick="add_time();"></i>
    </div>                          

JS function :-

    document.querySelectorAll("#time-pickable").forEach(timePickable => {
    let activePicker = null;