title: Bootstrap table multi select rows and highlight
body: <p>I am using Bootstrap Tables and currently using the <code>Hoverable Rows</code> that they offer. I used the table code from <a href="https://getbootstrap.com/docs/4.4/content/tables/#hoverable-rows" rel="nofollow noreferrer">https://getbootstrap.com/docs/4.4/content/tables/#hoverable-rows</a> and modified it slightly to work with the JS.</p>
  
  <pre><code>&lt;table class="table table-hover" id="myTable"&gt;
    &lt;thead&gt;
      &lt;tr class="clickable-row"&gt;
        &lt;th scope="col"&gt;#&lt;/th&gt;
        &lt;th scope="col"&gt;First&lt;/th&gt;
        &lt;th scope="col"&gt;Last&lt;/th&gt;
        &lt;th scope="col"&gt;Handle&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr class="clickable-row"&gt;
        &lt;th scope="row"&gt;1&lt;/th&gt;
        &lt;td&gt;Mark&lt;/td&gt;
        &lt;td&gt;Otto&lt;/td&gt;
        &lt;td&gt;@mdo&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="clickable-row"&gt;
        &lt;th scope="row"&gt;2&lt;/th&gt;
        &lt;td&gt;Jacob&lt;/td&gt;
        &lt;td&gt;Thornton&lt;/td&gt;
        &lt;td&gt;@fat&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="clickable-row"&gt;
        &lt;th scope="row"&gt;3&lt;/th&gt;
        &lt;td colspan="2"&gt;Larry the Bird&lt;/td&gt;
        &lt;td&gt;@twitter&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>I found some JS and was able to get it to work with only one row being selected..</p>
  
  <pre><code>$('#myTable').on('click', '.clickable-row', function(event) {
    $(this).addClass('active').siblings().removeClass('active');
  });
  </code></pre>
  
  <p>I do not know JS very well and am looking for a way to allow multiple rows to be selected/unselected.</p>
  
  <p>I was able to change the JS to:</p>
  
  <pre><code>$('#myTable').on('click', '.clickable-row', function(event) {
    $(this).addClass('active');
  });
  </code></pre>
  
  <p>And it allowed me to select multiple. But I can't unselect them.</p>