JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<input class="test-input" placeholder="hh:mm" value=""/>
<input class="test-input" placeholder="hh:mm" value=""/>
<input class="test-input" placeholder="hh:mm" value=""/>
<input class="test-input" placeholder="hh:mm" value=""/>
<input class="test-input" placeholder="hh:mm" value=""/>

JavaScript

//either you can do this ( this is not optimised approach )
    document.body.addEventListener('keyup',keyUpHandler,false);
    
    function keyUpHandler(e){  
        var evt = e || window.event;
        var target = evt.target || evt.srcElement;
        var key = e.keyCode || e.which;   

        //check if it is our required input with class test input
        if(target.className.indexOf('test-input') > -1){
            insertTimingColor(target,key)
        }

    }

    function insertTimingColor(element,key){
        var inputValue = element.value;
        if(element.value.trim().length == 2 && key !== 8){
            element.value = element.value + ':';
        }
    }