I am currently working on customizing the appearance of a JavaScript date counter. My goal is to style the days, hours, minutes, and seconds individually. Ideally, I want each unit to be right-aligned within its own div, with specific left and top absolute values. However, when I attempted to implement this, the timer did not replace the previous numbers as expected, resulting in a messy display.
Below is the code snippet that contains the output I am trying to customize:
document.getElementById(id).innerHTML = days + 'days ';
document.getElementById(id).innerHTML += hours + 'hrs ';
document.getElementById(id).innerHTML += minutes + 'mins ';
document.getElementById(id).innerHTML += seconds + 'secs';
Here's a fiddle where the counter works correctly but lacks separate styling
However, my attempts to place each unit in separate divs resulted in unexpected behavior, as the counter failed to update and simply added numbers instead. Here's a fiddle demonstrating this issue
Can anyone advise me on how to achieve the desired custom styling for the JavaScript date counter?