I am attempting to dynamically change the color of my calendar blocks based on the current time.
I have created variables for various times in military format and compared them with the current time using a conditional statement. For instance, I have specified that 09:00 is less than the current time, which is 20:00. Despite this condition being true, the color change does not occur on the page as intended.
var dayTime = (moment().format('HH'))
var nine = '09';
console.log(nine);
var ten = '10';
var eleven = '11';
var twelve = '12';
var one = '13';
var two = '14';
var three = '15';
var four = '16';
var five = '17';
if (nine < dayTime) {
$('#nineText').addclass('past');
}.past {
background-color: #ff6961;
color: white;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://momentjs.com/downloads/moment.js"></script>
<div class="time-block">
<div class="row">
<div class="col-1">
<p class='hour'>9AM</p>
</div>
<div class="col-10">
<textarea id='nineText' class="form-control" type='text' placeholder='placeholder' rows="2.9"></textarea>
</div>
<div class="col-md-1">
<button class="input-group-addon saveBtn btn-primary btn-lg" type="submit">Save</button>
</div>
</div>
</div>My logic seems sound, but there must be a step that I am overlooking.