Selecting multiple table rows

Please tell me how you can implement the selection of rows in the table, as here example in example #1 "Simple data range picker with a callback". That is, we click on a row of the table, it is highlighted in color, and then when you move the mouse over the rows of the table, they are also highlighted in color until another row is selected. All lines between the first and the second must have the same color, respectively.

Below I will give my code, but it does not work correctly. If click on a row with the mouse, go beyond the border of the table and click on another row, then the rows between them will not be highlighted. Tell me how you can fix this and whether I think in the right direction at all. Thank you in advance!

My code

$(document).ready(function() {
  $(".color_table tr").hover(function() {
    $(this).addClass("hover_color")
  }, function() {
    $(this).removeClass("hover_color")
  });


  $(".color_table tr").click(function() {
    $(this).toggleClass("click_color");

    $(".color_table tr").mouseover(function() {
      $(this).toggleClass("hover_color2");
    });

    $(".color_table tr").click(function() {
      $(this).removeClass("hover_color2");
      $(this).addClass("click_color");
      return;
    });
  });

});

.alternate_color {
  background-color: #f5f5dc;
}

.color_table {
  border: 1px solid black;
  border-collapse: collapse;
  margin: 0 auto;
}

.color_table th,
.first_tr {
  background-color: #aaddee;
}

.hover_color {
  background-color: #ffff00 !important;
}

.click_color {
  background-color: #90ee90 !important;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<table class="color_table">
  <tr class="first_tr">
    <th style="width: 25px;"></th>
    <th style="width: 150px;">Первый столбец</th>
    <th style="width: 150px;">Второй столбец</th>
  </tr>
  <tr class="alternate_color">
    <th>1)</th>
    <td>Значение №1</td>
    <td>Значение №2</td>
  </tr>
  <tr>
    <th>2)</th>
    <td>Значение №3</td>
    <td>Значение №4</td>
  </tr>
  <tr class="alternate_color">
    <th>3)</th>
    <td>Значение №5</td>
    <td>Значение №6</td>
  </tr>
  <tr>
    <th>4)</th>
    <td>Значение №7</td>
    <td>Значение №8</td>
  </tr>
  <tr class="alternate_color">
    <th>5)</th>
    <td>Значение №9</td>
    <td>Значение №10</td>
  </tr>
</table>