How to make buttons stay selected? [duplicate]

Question

the rating buttons on my site lose their state when I click on any other place on the page.

How can I make them stay selected (red)? Please see the screenshots below:

button {
  width: 100%;
  background-color: #8e95a2;
  border: none;
  padding: 15px;
}

button:active {
  background: blue;
}

button:hover {
  border-collapse: collapse;
  text-align: center;
  color: #ffffff;
  background-color: #ad0f0f;
  border-radius: 0px;
}

button:focus {
  border-collapse: collapse;
  text-align: center;
  color: #ffffff;
  background-color: #ad0f0f;
  border-radius: 0px;
}

<table style="width:100%">
  <tr>
    <td><button type="button">1</button></td>
    <td><button type="button">2</button></td>
    <td><button type="button">3</button></td>
    <td><button type="button">4</button></td>
    <td><button type="button">5</button></td>
    <td><button type="button">6</button></td>
    <td><button type="button">7</button></td>
    <td><button type="button">8</button></td>
    <td><button type="button">9</button></td>
    <td><button type="button">10</button></td>
  </tr>
</table>