JSFiddle - React, Tailwind, and code Playground

by Anu Vidhya

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<div class="aaa">
<table id="myTable">
<div id="clock">
time
</div>
  
</table>

<input type="button" class="btn" value="addmore">
</div>

CSS

.progressbar
{
  position:relative;
  height:20px;
  width:1px;
  background-color:green;
  top:0px;
  left:5px;
  border:1px;
  
}
.red
{
   position:relative;
  height:20px;
  width:10%;
  background-color:red;
  top:0px;
  left:5px;
  border:1px;
}
.aaa
{
  height:200px;
  width:100%;
  left:0px;
  top:0px;
  
  position:relative;
}
td
{
  width:100px;
  heigth:20px;
}

JavaScript

$(document).ready(function(){
var seconds = 0, minutes = 0, hours = 0, tablelength,wi;
//console.log(startTime);
          
   setInterval(function()
 	{
seconds++;
wi++;
    if (seconds >= 60) {
        seconds = 0;
        minutes++;
        if (minutes >= 60) {
            minutes = 0;
            hours++;
        }
    }
   update(); 	  	
 }, 1000);
$(".btn").click(function(){
console.log(hours+":"+minutes+":"+seconds);
var len = $("#myTable tr").length;
tablelength = len;
var counts = len +1;
$("#myTable").append('<tr><td><div id="progress'+counts+'" class="progressbar"></div></td></tr>');
//update();

});
function update()
{
var wi = seconds;
var wd;
if(wi == 60)
{
  wd=60*(seconds+1);
}
else
{
wd = seconds;
}
//console.log("update");
var tablelength = $("#myTable tr").length;
for(var i =0 ; i < tablelength ; i++)
{
var ll = i +1;
if(minutes < 1)
{
$("#progress"+ll).css({"background-color":"red","width":wd});
}
else if(minutes < 2)
{
$("#progress"+ll).css({"background-color":"yellow","width":wd});

}
else if(minutes < 4 )
{
$("#progress"+ll).css({"background-color":"blue","width":wd});
}
else if(minutes < 5)
{
$("#progress"+ll).css({"background-color":"orange","color":"red","width":100});
}

}

}


	});