JSFiddle - React, Tailwind, and code Playground

HTML

<input type='text' name='timepicker[1]' class='datepicker_dynamic' id='timepicker.[1]'/>
--
<input type='text' name='endtime[1]' class='datepicker_dynamic' id='endtime.[1]' /><br>

<input type='text' name='timepicker[2]' class='datepicker_dynamic' id='timepicker.[2]'/>
--
<input type='text' name='endtime[2]' class='datepicker_dynamic' id='endtime.[2]' /><br>

<input type='text' name='timepicker[3]' class='datepicker_dynamic' id='timepicker.[3]'/>
--
<input type='text' name='endtime[3]' class='datepicker_dynamic' id='endtime.[3]' /><br>

<input type='text' name='timepicker[4]' class='datepicker_dynamic' id='timepicker.[4]'/>
--
<input type='text' name='endtime[4]' class='datepicker_dynamic' id='endtime.[4]' /><br>

CSS

.ui-timepicker-wrapper {
	overflow-y: auto;
	height: 150px;
	width: 6.5em;
	background: #fff;
	border: 1px solid #ddd;
	-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
	-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);
	box-shadow:0 5px 10px rgba(0,0,0,0.2);
	outline: none;
	z-index: 10001;
	margin: 0;
}

.ui-timepicker-wrapper.ui-timepicker-with-duration {
	width: 11em;
}

.ui-timepicker-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ui-timepicker-duration {
	margin-left: 5px; color: #888;
}

.ui-timepicker-list:hover .ui-timepicker-duration {
	color: #888;
}

.ui-timepicker-list li {
	padding: 3px 0 3px 5px;
	cursor: pointer;
	white-space: nowrap;
	color: #000;
	list-style: none;
	margin: 0;
}

.ui-timepicker-list:hover .ui-timepicker-selected {
	background: #fff; color: #000;
}

li.ui-timepicker-selected,
.ui-timepicker-list li:hover,
.ui-timepicker-list .ui-timepicker-selected:hover {
	background: #1980EC; color: #fff;
}

li.ui-timepicker-selected .ui-timepicker-duration,
.ui-timepicker-list li:hover .ui-timepicker-duration {
	color: #ccc;
}

.ui-timepicker-list li.ui-timepicker-disabled,
.ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
	color: #888;
	cursor: default;
}

.ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
	background: #f2f2f2;
}

JavaScript

!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):a(jQuery)}(function(a){function g(a){if(a.minTime&&(a.minTime=w(a.minTime)),a.maxTime&&(a.maxTime=w(a.maxTime)),a.durationTime&&"function"!=typeof a.durationTime&&(a.durationTime=w(a.durationTime)),a.disableTimeRanges.length>0){for(var b in a.disableTimeRanges)a.disableTimeRanges[b]=[w(a.disableTimeRanges[b][0]),w(a.disableTimeRanges[b][1])];a.disableTimeRanges=a.disableTimeRanges.sort(function(a,b){return a[0]-b[0]})}return a}function h(b){var d=b.data("timepicker-settings"),e=b.data("timepicker-list");e&&e.length&&(e.remove(),b.data("timepicker-list",!1)),e=a("<ul />",{"class":"ui-timepicker-list"});var g=a("<div />",{"class":"ui-timepicker-wrapper",tabindex:-1});g.css({display:"none",position:"absolute"}).append(e),d.className&&g.addClass(d.className),null===d.minTime&&null===d.durationTime||!d.showDuration||g.addClass("ui-timepicker-with-duration");var h=d.minTime;"function"==typeof d.durationTime?h=w(d.durationTime()):null!==d.durationTime&&(h=d.durationTime);var i=null!==d.minTime?d.minTime:0,j=null!==d.maxTime?d.maxTime:i+c-1;i>=j&&(j+=c);for(var k=d.disableTimeRanges,l=0,n=k.length,o=i;j>=o;o+=60*d.step){var p=o%c,q=a("<li />");if(q.data("time",p),q.text(v(p,d.timeFormat)),(null!==d.minTime||null!==d.durationTime)&&d.showDuration){var r=a("<span />");r.addClass("ui-timepicker-duration"),r.text(" ("+u(o-h)+")"),q.append(r)}n>l&&(p>=k[l][1]&&(l+=1),k[l]&&p>=k[l][0]&&p<k[l][1]&&q.addClass("ui-timepicker-disabled")),e.append(q)}g.data("timepicker-input",b),b.data("timepicker-list",g);var s=d.appendTo;"string"==typeof s?s=a(s):"function"==typeof s&&(s=s(b)),s.append(g),m(b,e),e.on("click","li",function(){b.off("focus.timepicker"),b.on("focus.timepicker-ie-hack",function(){b.off("focus.timepicker-ie-hack"),b.on("focus.timepicker",f.show)}),b[0].focus(),e.find("li").removeClass("ui-timepicker-selected"),a(this).addClass("ui-timepicker-selected"),t(b)&&g.hide()})}function i(){return new...