javascript - change color of list elements according to condition

Question

I have two tables :

Table 1 (overall Score )

Table 2 (weekly score )

I have a leaderboard where I am echoing the overall score value from Table 1 :

Problem : What I am trying to do here is that whoever scores "-10" in table 2 (weekly score) , I want to alert the user by highlighting the color of their box in the leaderboard ,which is yellow now, to red.

current css involved :

li mark div {
    display: block;
    margin: 4px;
    padding: 5px;
    min-height: 50px;
    border: 2px solid #eebb55;
    border-radius: 7pt;
    background: grey;
}

Php involved to display the list.This is for "overall" (right tab in leader board) .Similar exist for weekly too .

<div id="overalllb" class="leadboardcontent" style="display:none">
    <div class="leaderboard">
        <ol>
            <li>
                <mark>
                    <?php  while( $toprow2 = sqlsrv_fetch_array( $stmt3) ) {
                        echo  "<div class='parent-div'><span class='rank'>" . $toprow2['overallRank'] . "</span><span class='name'>" . $toprow2['EmployeeName'] . "</span><span class='points'>" . $toprow2['Total_points_Rewarded'] . "</span></div>";
                    } ?>
                </mark>
            </li>
        </ol>
    </div>

Queries passed to retrieve info from both the tables :

1.query 1 - to find out all the employees with a score of -10.

$q200 = " select *
  from Table2
  where  WeekNumber = 'week1' and pointsRewarded = '-10';";
  $stmt200=sqlsrv_query($conn,$q200);
  if($stmt200==false)
  {
  echo 'error to retrieve info !! <br/>';
  die(print_r(sqlsrv_errors(),TRUE));
  }

query 2- to retrieve from table 1 all the employees :

$q20 = "select *
  from EmployeeTable
  order by Total_points_Rewarded desc";
  $stmt20=sqlsrv_query($conn,$q20);
  if($stmt20==false)
  {
  echo 'error to retrieve info !! <br/>';
  die(print_r(sqlsrv_errors(),TRUE));
  }

Code that I tried with :

<?php while( $toprow20 = sqlsrv_fetch_array( $stmt20) ) {

echo  "<div class='parent-divv'><span class='rank'>" . $toprow20['overallRank'] . "</span><span class='name'>" . $toprow20['EmployeeName'] . "</span><span class='points'>" . $toprow20['Total_points_Rewarded'] . "</span></div>";

}?>
<?php if ($toprow20['EmployeeID'] == $toprow200['EmployeeID'] ) ?>{
  <style>
  .parent-divv {
  border: 1px solid red;
  }
  </style>
}

The code above changes all color to red.I want only matching names/ID in both queries to be red.rest remain as it is. I am using PHP,Please suggest me a way to do it.God bless.

Answer 1

1) Join the the queries into one

select EmployeeTable.*,Table2.pointsRewarded as `weeklyDelta`
from EmployeeTable join Table2 on EmployeeTable.EmployeeID = Table2.EmployeeID
where Table2.WeekNumber = 'week1'
order by Total_points_Rewarded desc

2) Then give the employees with negative deltas a special class

<?php  
while( $toprow2 = sqlsrv_fetch_array( $stmt3) ) {
    echo  "<div class='parent-div" .
        ($toprow2['weeklyDelta'] <= -10 ? " dropped" : "") .
        "'><span class='rank'>" .
        $toprow2['overallRank'] . "</span><span class='name'>" . 
        $toprow2['EmployeeName'] . "</span><span class='points'>" . 
        $toprow2['Total_points_Rewarded'] . "</span></div>";
} ?>

3) give those employees a style

.parent-div.dropped { color:red }