I have read through multiple threads but none of them specifically speak to my issue. I have a table functioning as a dropdown. (Yes, it has to be this way)

```js
var blocka = "test1"
$('#john').on('change', function() {
  if (this.checked) {
    this.setAttribute("checked", "checked");
    this.checked = true;
  }
  if (this.checked) {
    //checkbox clicked is now checked
    var tx = document.getElementById('james').innerHTML;
    $('.variant_title').text(tx);
  }
  if (this.checked) {
    //checkbox clicked is now checked
    var rx = document.getElementById('matt').innerhtml;
    $('.variant_price').text(rx);
  } else {
    this.setAttribute("checked", ""); // For IE
    this.removeAttribute("checked"); // For other browsers
    this.checked = false;
    $('.variant_title').empty();
    $('.variant_price').empty();
  }
});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="special-select">
  <tbody>
    <tr>
      <td>
        <span class="selecter-selected variant_title" name="click_me" style="height:40px! important;"></span>
      </td>
    </tr>
    <tr id="picker" class="select-closed" style="font-size:.75rem;float:left! 
     important;min-height:1.20em;">
      <td><input id="john" name="updates[31435395282]" type="checkbox" value="31435395282:" />&nbsp;</td>
      <td>MAPerformance Hoodie - Unisex Hoodie / Black / S - <span id="matt">$0.01</span></td>
      <td id="james" class="hide">Unisex Hoodie / Black / S - $0.01</td>
    </tr>
    <tr id="picker" class="select-closed" style="font-size:.75rem;float:left! 
    important;min-height:1.20em;">
      <td><input id="john" name="updates[31435395346]" type="checkbox" value="31435395282:" />&nbsp;</td>
      <td>MAPerformance Hoodie - Unisex Hoodie / Black / M - <span id="matt">$0.01</span></td>
      <td id="james" class="hide">Unisex Hoodie / Black / M - $0.01</td>
    </tr>
    <tr id="picker" class="select-closed" style="font-size:.75rem;float:left! 
    important;min-height:1.20em;">
      <td><input id="john" name="updates[31435395410]" type="checkbox" value="31435395282:" />&nbsp;</td>
      <td>MAPerformance Hoodie - Unisex Hoodie / Black / L - <span id="matt">$0.01</span></td>
      <td id="james" class="hide">Unisex Hoodie / Black / L - $0.01</td>
    </tr>
  </tbody>
  <div class="variant_price"></div>
</table>
```

the code I am using to get the value of 'james' is working for the first checkbox input. However, when I uncheck the input and try to check a new one I get no value showing for the variant\_title.

How do I get it to work for more than the first iteration?