JSFiddle - React, Tailwind, and code Playground

HTML

<input type='text' name='sometime' id='sometime' value='4:00PM' />

CSS

.timify-wrapper {
 border: solid 1px;
padding: 1px;    
    width: 100px;
}

.timify-wrapper input  {
 border: solid 1px #ccc;
width: 2em;    
}
.timify-wrapper .timify{
    display:block;
    opacity: .4;
    width: 80%;
}

JavaScript

(function($) {
    
$.fn.timify = function() {
    
    return this.each(function() {
        if ($(this).is("input")) {
            build($(this));
        }            
    });
    function multiplier (evt) {
        if(evt.shiftKey) { return 5; }                
   
        return 1;
    }
    
    function build(el) {
        el.addClass("timify").wrap("<div class='timify-wrapper' />");
        var wrapper = el.closest(".timify-wrapper");
        wrapper.append("<input type='text' value='4' class='hour timify-helper' data-max='12' data-min='1' />");
        wrapper.append("<input type='text' value='00' class='minute timify-helper' data-max='59' data-min='0' />");
        wrapper.append("<input type='text' value='AM' class='ampm timify-helper' />");
        
        wrapper.delegate("input", "change input", function(e) {
               
            if ($(this).is(".timify")) {
             return;   
            }
               var wrapper = $(this).closest(".timify-wrapper");
               var minutes = wrapper.find(".minute").val();        
               var hours = wrapper.find(".hour").val();        
               var am = wrapper.find(".ampm").val();     
               wrapper.find(".timify").val(       
                   hours + ":" + minutes + " " + am
               );                       
        });
        
        
        wrapper.delegate("input", "keydown", function(e) {
            
            
            // TODO: only focus on left/right if the cursor is all the way at the end
            
            // Left
            if (e.keyCode == 37) {
                $(this).prev(".timify-helper").focus().select();
                return false;
            }
            
            // Right 
            if (e.keyCode == 39) {
                $(this).next(".timify-helper").focus().select();
                return false;
            }
            
            if (!$(this).hasClass("timify-helper")) {
                   return;        
        ...