Mudar cor dos elementos com Javascript e JSF

Programação
,
#1

Olá pessoal, boa noite! Tô com um problema ao tentar mudar a cor do valor do h4 de acordo com o valor do seu texto. Tenho uma página onde faço a listagem de alguns cards. Se esses cards estiverem com o valor “Indisponível” o cor do h4 deve ficar vermelho. Tentei utilizar um script e funcionou tranquilamente para um elemento. O resto continua na cor padrão que é verde. Gostaria que as cores de todos os cards que contém o nome “indisponível” ficassem em vermelho. Como podem ver abaixo, apenas o primeiro card está em vermelho e o outro não.

Captura de tela de 2022-04-18 21-51-17
Captura de tela de 2022-04-18 21-51-17793×55 3.04 KB

Eu não manjo muito de Javascript. Se alguém puder ajudar, ficarei bastante grato.

Script

	<script>
		let valor = document.getElementById("situacao").innerHTML
		if(valor == "Indisponível"){
			document.getElementById("situacao").style.color='red'
		}
	</script>

Página:

<ui:composition template="/WEB-INF/template/MenuGenerico.xhtml"

  xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
	
	<ui:define name="corpo">
	<section id="conteudo-busca">
	<p:panel header="Veículos Disponíveis">
	<ui:repeat value="#{veiculoBean.veiculos}" var="veiculo" >
    <h:link  outcome="TelaApresentacaoVeiculo">
	<h:form style="display: inline-block;">
	<p:card id="card" style="width: 25rem; margin-right: 12px; margin-top: 1em; margin-bottom: 1em; text-align: center;">
    <f:facet name="title">
        <p:outputLabel value="#{veiculo.modelo}"></p:outputLabel>
    </f:facet>
    
    <p:graphicImage width="250" height="200" library="imagens" name="#{veiculo.pathImagem}"></p:graphicImage>

    <h4>Valor da diária R$: #{veiculo.valorDiaria}</h4>
        <h4 id="situacao" style="color: green;">#{veiculo.situacao}</h4>
</p:card>
	<script>
		let valor = document.getElementById("situacao").innerHTML
		if(valor == "Indisponível"){
			document.getElementById("situacao").style.color='red'
		}
	</script>
</h:form>
	 <f:param name="idVeiculo" value="#{veiculo.id}"></f:param>
    </h:link>
	</ui:repeat>
	</p:panel>
	</section>
	</ui:define>
	
	</ui:composition>
#2

Descobri o problema! Eu estava tentando mudar vários elementos usando um id, sendo que um id é um elemento único de uma tag. Então utilizei uma class no lugar do id e em seguida fiz um for para percorrer os cards que contém a classe “situacao”. O código ficou assim:

<script>
		 var allBox = document.getElementsByClassName("situacao")
	        for (let index = 0; index &lt; allBox.length; index++) {
		       if(allBox[index].innerHTML == "Indisponível"){
	            allBox[index].style.color = 'red'
		       }
	      }
	</script>