I am using Bootstrap Tables and currently using the `Hoverable Rows` that they offer. I used the table code from <https://getbootstrap.com/docs/4.4/content/tables/#hoverable-rows> and modified it slightly to work with the JS.

```
<table class="table table-hover" id="myTable">
  <thead>
    <tr class="clickable-row">
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr class="clickable-row">
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr class="clickable-row">
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr class="clickable-row">
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

```

Basically I want to be able to click on a row and it keeps the hover effect. And then when I click it again it will remove the hover. But I want to be able to select multiple rows.

I found some JS and was able to get it to work with only one row being selected..

```
$('#myTable').on('click', '.clickable-row', function(event) {
  $(this).addClass('active').siblings().removeClass('active');
});

```

I do not know JS very well and am looking for a way to allow multiple rows to be selected/unselected.

I was able to change the JS to:

```
$('#myTable').on('click', '.clickable-row', function(event) {
  $(this).addClass('active');
});

```

And it allowed me to select multiple. But I can't unselect them.