How does jQuery do the same operation on multiple elements with the same class name? It's always the first element that works, and the rest doesn't

I want to realize that when the "time on" attribute contains "display: None", the "time end" is displayed, but only the first one is executed normally. How can I write to make all the same classes realize this effect

html structure

<span class="time-on"></span>
<span class="time-end">活动已结束</span>

JS structure

if($(".time-on").css("display")=='none') {
    $(".time-end").css('display','inline-block');
};