JSFiddle - React, Tailwind, and code Playground

HTML

<div id="not-working">
  <h3>
  Click the text, then click the box
  </h3>
  <div class="selection-row" data-id="20">
    <div class="col-md-5">Data 20</div>
    <div class="col-md-2">
      <input type="checkbox" name="selectedDudes[]" value="20" id="checkbox-20">
    </div>
  </div>
  <div class="selection-row" data-id="22">
    <div class="col-md-5">Data 22</div>
    <div class="col-md-2">
      <input type="checkbox" name="selectedDudes[]" value="22" id="checkbox-22">
    </div>
  </div>
</div>

JavaScript

$(document).ready(function() {

  $(document).on("click", "div.selection-row", function() {
    var $cb = $('input[type="checkbox"]', $(this)), is_on = $cb.prop('checked');
    if (is_on) {
      //if its already checked, uncheck it
      $cb.prop('checked', false);
    } else {
      //if its not checked, check it
      $cb.prop('checked', true);
    }
  });
});