javascript - Display jQuery timepicker dynamically by looping and value is overwrite all picker

Question

I have problem with the indexing of the jQuery timepicker. I display the timepicker with the loop and I want to display timepicker dynamically, but when I select one picker all the rest follow.

It happens because the the picker class is same, I have try to put index on the class name but, it doesn't work, I don't know why. It might have another method to call jQuery by index, please help me.

var y = 0;
for (let x = 0; x <= $("#dayTbl").val(); x++) {
  formDisplay(x);
  y += x;
}
function formDisplay(x) {
  var formElement =
    "<div id='form' style='display: block'><input class='timepickerStart[" +
    y +
    "]' name='startTime' /><</div>";
  $("#place").append(formElement);
}

$(".timepickerStart[" + x + "]").timepicker();