JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr class="newDay"><td>Monday</td></tr>
    <tr data-id=0><td>One</td></tr>
    <tr data-id=0><td>Two</td></tr>
    <tr data-id=1><td>Three</td></tr>
    <tr data-id=1><td>Four</td></tr>
    
    <tr class="newDay"><td>Tuesday</td></tr>
    <tr data-id=0><td>Two</td></tr>
    <tr data-id=1><td>Four</td></tr>

    <tr class="newDay"><td>Wednesday</td></tr>
    <tr data-id=0><td>One</td></tr>

    <tr class="newDay"><td>Thursday</td></tr>
    <tr data-id=0><td>One</td></tr>
    <tr data-id=0 id="thu-two"><td>Two</td></tr>

    <tr class="newDay"><td>Friday</td></tr>
    <tr data-id=1><td>Three</td></tr>
    <tr data-id=1><td>Four</td></tr>

    <tr class="newDay"><td>Saturday</td></tr>
    <tr class="newDay"><td>Sunday</td></tr>

</table>

CSS

.newDay {
    background-color: lightblue;
}

tr[data-id] td {
    padding-left: 20px;
}

JavaScript

// hide all the group headers
$("tr.newDay").hide()

// hide all data rows
$("tr[data-id]").css("color","lightgrey").hide()

// show the data rows that meet the criteria
$("tr[data-id=1]").css("color","black").show()

// for visible data rows: change color
$("tr[data-id]:visible").css("color","blue")

// for visible data rows: find closest group heading & change color (and make visible)
$('tr[data-id]:visible')
    .prevUntil('.newDay').prev().not("[data-id]")
    .css("color","white").show()

// incorrect: this will only find *adjacent* siblings that are of class .newDay
//$("tr[data-id]:visible").prev(".newDay").css("color","blue")

// incorrect: this will look for current element and then parents
//$("tr[data-id]:visible").closest(".newDay").css("color","blue")

// optional: show all rows to check results
$("tr").show()
// result should be: 
// - black group header for groups without data rows [correct]
// - white group header for groups with data rows [correct]
// - blue group header if there is a "blue" value row [incorrect]