Do checkboxes need unique id's, names and labels to have their CSS background toggled?

Desired Behaviour

I have 35 tables containing 6 checkboxes each.

I am using this CSS in order to style their checked and unchecked states:

http://ift.tt/20Mc8Uz

When using more than 1 instance of a table, the CSS only seems to work (ie apply the correct checked and unchecked states) when each checkbox has a unique name, id and label.

I want to achieve the same effect without having to type a unique name, id and label for all of the 210 checkboxes in the 35 tables.

JSFiddle

http://ift.tt/1Y4mptb

What I've Tried

In the example below I have shown 2 table instances where each checkbox has a unique name, id and label.

Giving them the same "identifiers" prevents functionality, as does removing them altogether.

table {
  display: inline-block;
}
/* from:  
http://ift.tt/20Mc8UB 
*/

input[type=checkbox].css-checkbox {
  position: absolute;
  z-index: -1000;
  left: -1000px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}
input[type=checkbox].css-checkbox + label.css-label {
  padding-left: 22px;
  height: 17px;
  display: inline-block;
  line-height: 17px;
  background-repeat: no-repeat;
  background-position: 0 0;
  font-size: 17px;
  vertical-align: middle;
  cursor: pointer;
}
input[type=checkbox].css-checkbox:checked + label.css-label {
  background-position: 0 -17px;
}
label.css-label {
  background-image: url(http://ift.tt/1Y4mptd);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<table>
  <tr>
    <td class="area_checkbox">
      <input type="checkbox" name="checkboxG1" id="checkboxG1" class="css-checkbox" />
      <label for="checkboxG1" class="css-label">area 01</label>
    </td>
  </tr>
  <tr>
    <td class="area_checkbox">
      <input type="checkbox" name="checkboxG2" id="checkboxG2" class="css-checkbox" />
      <label for="checkboxG2" class="css-label">area 02</label>
    </td>
  </tr>
  <tr>
    <td class="area_checkbox">
      <input type="checkbox" name="checkboxG3" id="checkboxG3" class="css-checkbox" />
      <label for="checkboxG3" class="css-label">area 03</label>
    </td>
  </tr>
  <tr>
    <td class="area_checkbox">
      <input type="checkbox" name="checkboxG4" id="checkboxG4" class="css-checkbox" />
      <label for="checkboxG4" class="css-label">area 04</label>
    </td>
  </tr>
  <tr>
    <td class="area_checkbox">
      <input type="checkbox" name="checkboxG5" id="checkboxG5" class="css-checkbox" />
      <label for="checkboxG5" class="css-label">area 05</label>
    </td>
  </tr>
  <tr>
    <td class="area_checkbox">
      <input type="checkbox" name="checkboxG6" id="checkboxG6" class="css-checkbox" />
      <label for="checkboxG6" class="css-label">area 06</label>
    </td>
  </tr>
</table>
<!-- second table here -->
<table>
  <tr>
    <td class="area_checkbox">
      <input type="checkbox" name="checkboxG7" id="checkboxG7" class="css-checkbox" />
      <label for="checkboxG7" class="css-label">area 01</label>
    </td>
  </tr>
  <tr>
    <td class="area_checkbox">
      <input type="checkbox" name="checkboxG8" id="checkboxG8" class="css-checkbox" />
      <label for="checkboxG8" class="css-label">area 02</label>
    </td>
  </tr>
  <tr>
    <td class="area_checkbox">
      <input type="checkbox" name="checkboxG9" id="checkboxG9" class="css-checkbox" />
      <label for="checkboxG9" class="css-label">area 03</label>
    </td>
  </tr>
  <tr>
    <td class="area_checkbox">
      <input type="checkbox" name="checkboxG10" id="checkboxG10" class="css-checkbox" />
      <label for="checkboxG10" class="css-label">area 04</label>
    </td>
  </tr>
  <tr>
    <td class="area_checkbox">
      <input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox" />
      <label for="checkboxG11" class="css-label">area 05</label>
    </td>
  </tr>
  <tr>
    <td class="area_checkbox">
      <input type="checkbox" name="checkboxG12" id="checkboxG12" class="css-checkbox" />
      <label for="checkboxG12" class="css-label">area 06</label>
    </td>
  </tr>
</table>