Likert scale table in HTML

HTML

<table class="tg">
  <thead>
    <col width="200px">
    <col width="50px">
    <col width="50px">
    <col width="50px">
    <col width="50px">
    <tr>
      <th class="tg-wo29"></th>
      <th class="tg-wo31" colspan="2">Gar nicht<br>hilfreich</th>
      <th class="tg-wo32" colspan="2">Sehr<br>hilfreich</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="tg-wo30">
        <div class="item" id="r1">
        </div>
      </td>
      <td class="tg-wo29">
        <input type="radio" id="r1_0" name="r1" value="0" />
      </td>
            <td class="tg-wo29">
        <input type="radio" id="r1_1" name="r1" value="1" />
      </td>
            <td class="tg-wo29">
        <input type="radio" id="r1_2" name="r1" value="2" />
      </td>
            <td class="tg-wo29">
        <input type="radio" id="r1_3" name="r1" value="3" />
      </td>
    </tr>
    
        <tr>
      <td class="tg-wo30">
        <div class="item" id="r2">
        </div>
      </td>
      <td class="tg-wo29">
        <input type="radio" id="r2_0" name="r2" value="0" />
      </td>
            <td class="tg-wo29">
        <input type="radio" id="r2_1" name="r2" value="1" />
      </td>
            <td class="tg-wo29">
        <input type="radio" id="r2_2" name="r2" value="2" />
      </td>
            <td class="tg-wo29">
        <input type="radio" id="r2_3" name="r2" value="3" />
      </td>
    </tr>
    
  </tbody>
</table>

CSS

table {
  width: 90%;
}

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  border-color: black;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  padding: 9px 11px;
  word-break: normal;
}

.tg th {
  border-color: black;
  border-style: solid;
  border-width: 1px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: normal;
  overflow: hidden;
  padding: 9px 11px;
  word-break: normal;
}

.tg .tg-vt7q {
  border-color: #c0c0c0;
  text-align: right;
  vertical-align: top;
}

.tg .tg-wo29 {
  border-color: #c0c0c0;
  text-align: center;
  vertical-align: center;
}

.tg .tg-wo30 {
  border-color: #c0c0c0;
  text-align: left;
  vertical-align: top;
}

.tg .tg-wo31 {
  border-color: #c0c0c0;
  text-align: left;
  vertical-align: bottom;
}

.tg .tg-wo32 {
  border-color: #c0c0c0;
  text-align: right;
  vertical-align: bottom;
}

.item {
  height: 0px;
}

label {
    cursor: pointer;
    display: block;
    text-align: center;
}

JavaScript

var allRadios = document.querySelectorAll('input[type=radio]');
var booRadio;
var x = 0;
for (x = 0; x < allRadios.length; x++) {
  allRadios[x].onclick = function() {
    if (booRadio == this) {
      this.checked = false;
      booRadio = null;
    } else {
      booRadio = this;
    }
  };
}