JSFiddle - React, Tailwind, and code Playground
HTML
<input type="button" class="chrono"/>
<input type="button" class="chrono"/>
<input type="button" class="chrono"/>
<input type="button" class="chrono"/>
<input type="button" class="chrono"/>
<input type="button" class="chrono"/>
<input type="button" class="chrono"/>
<input type="button" class="chrono"/>
<input type="button" class="chrono"/>
<input type="button" class="chrono"/>
<input type="button" class="chrono"/>
<input type="button" class="chrono"/>
<input type="button" class="chrono"/>
<input type="button" class="chrono"/>
<input type="button" class="chrono"/>
<input type="button" class="chrono"/>
<input type="button" class="chrono"/>
<input type="button" class="chrono"/>
<input type="button" class="chrono"/>
<input type="button" class="chrono"/>
JavaScript
$.fn.extend({
chrono:function(){
return this.each(function(){
var t=$(this),
that=this,
time,
paused,
running,
update=function(curr,force){
if(running||force){
var milli=paused=curr-time,
second=Math.floor(milli/1000);
milli-=second*1000,
that.value=second+'s '+milli;
setTimeout(function(){update(new Date().getTime())},20)
}
},
stop=function(){
running=false,
update(time=0,true)
},
pause=function(){
running=false
},
play=function(){
var curr=new Date().getTime();
time=curr-paused,
running=true,
update(curr)
};
t.on('click',function(){if(running)pause();else play()}).on('dblclick',stop),
stop()
})
}
}),
$('.chrono').chrono()