Overriding bootstrap table-striped rows with jquer

hello everyone. I've used bootstrap 4 table classes to build the table shown in the image, including the table-striped class which gives the table it's alternate row bg-colors. I've then used a jquery function to give the highlighted row it's deep blue bg-color.

everything works as expected, except that the bg-color gotten from the jquery function, does not override the alternate (gray colored) rows of the table, it only works on the white colored rows. Is there a way to make this work? i.e make the function override the color of the gray colored rows as well as the white ones? I don't want to have to stop using the bootstrap table-striped class.

below is the jquery function I'm using:

$('tbody tr').click(function(){
     var selected = $(this).hasClass("highlight");
     $("tbody tr").removeClass("highlight");
     if(!selected)
        $(this).addClass("highlight");
});

Use link to your CSS file after link to the bootstrap CSS. For example:

<head>
    ...
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    ...
    <link rel="stylesheet" type="text/css" href="mytheme.css">
</head>

Note, you could add any query string to your CSS-file URL to avoid сaching problem:

<link rel="stylesheet" href="mytheme.css?version=new">

Also you can use !important rules in your CSS as a last resort.

.highlight {
  background-color: red !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="table-responsive">
  <table class="table table-bordered table-striped">
    <colgroup>
      <col class="col-xs-1">
      <col class="col-xs-7"> </colgroup>
    <thead>
      <tr>
        <th>Class</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Text</th>
        <td>Text</td>
      </tr>
      <tr>
        <th scope="row">Text</th>
        <td>Text</td>
      </tr>
      <tr class="highlight">
        <th scope="row">Text</th>
        <td>highlited row</td>
      </tr>
      <tr>
        <th scope="row">Text</th>
        <td>Text</td>
      </tr>
      <tr>
        <th scope="row">Text</th>
        <td>Text</td>
      </tr>
    </tbody>
  </table>
</div>