JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bar-something"><div class="fn-label"> SOMETHING</div> </div>
<div class="bar-appointment"><div class="fn-label"> Ap1</div></div>
<div class="bar-appointment"><div class="fn-label"> Ap2</div></div>
<div class="bar-appointment"><div class="fn-label"> Ap3</div></div>
<div class="bar-something-else"><div class="fn-label"> SOMETHING</div></div>
<div class="bar-appointment"><div class="fn-label"> Ap1</div></div>
<div class="bar-appointment"><div class="fn-label"> Ap2</div></div>
<div class="bar-appointment"><div class="fn-label"> Ap3</div></div>

CSS

.bar-something .fn-label{
   background-color:red;    
}
.bar-something-else .fn-label{ 
    background-color:green;
}

JavaScript

$('.bar-appointment').each(function(){
    $(this).find('.fn-label').css('color', $(this).prevAll(':not(.bar-appointment)').first().find('.fn-label').css('background-color'))
})