Elements Won't stay Selected

Elements Won't stay Selected

I have a  5 by 5 table (5 rows by 5 columns). Each row has either a class of red or blue and when the page finishes loading, all the rows with blue class have blue backgrounds and all the ones with a class of red have red backgrounds. 

When I hover over a row it should turn gray. Then if any row is clicked, its backgound should be set to white.

I was able to get most of the fuctionalities that I needed.  I was able to turn the background of any row white when clicked but once I move the mouse out of the row it reverts back to the previous color.

Below is my jQuery and markup

$(document).ready(function() {
      
             $("tbody tr").hover(function(){
               $(this).css("background-color", "gray"); 
             });    

             $("tbody tr").click(function(){
             
                $(this).css("background-color", "white"); 
               }                 
            });
});

    <table>
        <thead>
            <tr>
                <th>Column1</th><th>Column2</th><th>Column3</th><th>Column4</th><th>Column5</th>
            </tr>
        </thead>
        <tbody>
            <tr class="red">
                <td>test</td><td>test</td><td>test</td><td>test</td><td>test</td>
            </tr>
            <tr class="blue">
                <td>test</td><td>test</td><td>test</td><td>test</td><td>test</td>
            </tr>
            <tr class="red">
                <td>test</td><td>test</td><td>test</td><td>test</td><td>test</td>
            </tr>
            <tr class=blue"">
                <td>test</td><td>test</td><td>test</td><td>test</td><td>test</td>
            </tr>
            <tr class="red">
                <td>test</td><td>test</td><td>test</td><td>test</td><td>test</td>
            </tr>
        </tbody>
    </table>