JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
<label for="startTime1">* Proposed Start Time:</label>  
<div class="input-group">
    <input class="timeinput form-control timepicker timepicker-with-dropdown text-center" id="startTime1" name="startTime1" placeholder="Start Time 1">
    <span class="input-group-addon">
        <i class="fa fa-arrow-down fa-fw" id="startTime1Trigger" aria-hidden="true"></i>

    </span>
</div>

JavaScript

//Timepicker 
				$('.timepicker').timepicker({
					timeFormat: 'h:mm p',
					interval: 30,
					minTime: '0',
					maxTime: '11:30p',
					defaultTime: '0',
					startTime: '',
					dynamic: true,
					dropdown: true,
					//allowInputToggle: true,
					scrollbar: true
				});
				$('.timepicker').val("");


$('#startTime1Trigger').on('click', function(){
    $('.timepicker').timepicker('show');
    //$('#startTime1').timepicker('show'); //didnt work either
    //alert('triggered');
});