JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<div id="output">
    houres: <span class="hour"></span><br>
    minuts: <span class="min"></span><br>
    seconds: <span class="sec"></span><br>
    <br>
    <span class="hour"></span>:<span class="min"></span>:<span class="sec"></span><br>
        <input class="clockBttn stop" type="button" value="stop clock"></input>
    <hr/>
    <input class="addTime" type="button" value="add a time"></input>
        <div class="times">
            
        </div>
</div>

JavaScript

$(document).ready(function(){
//---------User Inputs---------//
    $('.addTime').click(function(){
        addTime();
    });
    
    $('.time').hover(function(){
        
    });

//---------Start functions----------//
    getTime();
    
    var time = setInterval(function(){
        getTime();
    }, 1000);
    
//---------Variables-----------//
        var i=0,
        time;
    
//---------Functions----------//
    function getTime(newTime){
        var d = new Date();
        var h = d.getHours();
        var m = d.getMinutes();
        var s = d.getSeconds();
        newTime = String(h)+String(m)+String(s);
        
        $('#output').find('.hour').html(h);
        $('#output').find('.min').html(m);
        $('#output').find('.sec').html(s);
        
    }
    
    function addTime(){
        i+=1;
        if(i <= 10){
            $('#output').find('.times').append('<span class="time" oldTime="'+getTime(newTime)+'" intervalNumb="time'+i+'" title="">Time'+i+' appended "" ago</span><br>');
        }
    
        var time = setInterval(function(){
            getTime();
        }, 1000);
    }
    
    //Start Stop Clock//
    $('.clockBttn').click(function(){
        var $this = $(this);
        
        if( $this.hasClass('stop')){
            //Stop interval
            clearInterval(time);
            
            //Set bttn val
            $this.attr('value','Start clock');
            
            //Change class
            $this.removeClass('stop');
            $this.addClass('start');
            
        }else if($this.hasClass('start')){
            //Start interval
            time = setInterval(function(){
                getTime();
            }, 1000);
            
            //Set bttn val            
            $this.attr('value','Stop clock');
            
            //Change class
            $this.removeClass('start');
            $this.addClass('stop');
        }
    });

});