JSFiddle - React, Tailwind, and code Playground

by Arnaud

HTML

<ul class="joursCovoituragePlanifie">
       <li> &nbsp; </li>
       <li>Lun</li>
       <li>Mar</li>
       <li>Mer</li>
       <li>Jeu</li>
       <li>Ven</li>
       <li>Sam</li>
       <li>Dim</li>
      </ul>
      <ul class="DepartCovoituragePlanifie">
       <li>Aller</li>
       <li>
        <input type="text" class="checkCovoiturage " name="checkCovoiturageLundiDepart" value="08:25" placeholder="✖" readonly /> </li>
       <li>
        <input type="text" class="checkCovoiturage " name="checkCovoiturageMardiDepart" value="00:00" placeholder="✖" readonly /> </li>
       <li>
        <input type="text" class="checkCovoiturage " name="checkCovoiturageMercrediDepart" value="09:00" placeholder="✖" readonly /> </li>
       <li>
        <input type="text" class="checkCovoiturage " name="checkCovoiturageJeudiDepart" value="00:00" placeholder="✖" readonly /> </li>
       <li>
        <input type="text" class="checkCovoiturage " name="checkCovoiturageVendrediDepart" value="09:00" placeholder="✖" readonly /> </li>
       <li>
        <input type="text" class="checkCovoiturage " name="checkCovoiturageSamediDepart" value="13:16" placeholder="✖" readonly /> </li>
       <li>
        <input type="text" class="checkCovoiturage " name="checkCovoiturageDimancheDepart" value="00:00" placeholder="✖" readonly /> </li>
      </ul>
      <ul class="RetourCovoituragePlanifie">
       <li>Retour</li>
       <li>
        <input type="text" class="checkCovoiturage " name="checkCovoiturageLundiRetour" value="17:45" placeholder="✖" readonly /> </li>
       <li>
        <input type="text" class="checkCovoiturage " name="checkCovoiturageMardiRetour" value="00:00" placeholder="✖" readonly /> </li>
       <li>
        <input type="text" class="checkCovoiturage " name="checkCovoiturageMercrediRetour" value="17:00" placeholder="✖" readonly /> </li>
       <li>
        <input type="text" class="checkCovoiturage " name="checkCovoiturageJeudiRetour" value="14:18" placeholder="✖" readonly />...

JavaScript

$('.checkCovoiturage').each(function() {
    var valeurInput = $(this).val();
    if (valeurInput == "00:00") {
	$(this).css("background", "#E3A52D");

        }
		else {
			$(this).css("background", "#31BA9C");

		}
		});