JSFiddle - React, Tailwind, and code Playground

HTML

<table class="availableProduct">
  <tr>
    <td>
      <input type="checkbox" class="product-group" data-productid="SAP003" data-id="Annual-46-4" data-optionid="46">
    </td>
    <!-- FIND THIS -->
    <td>foobar</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="product-group" data-productid="SAP0031" data-id="Annual-46-14" data-optionid="461">
    </td>
    <!-- FIND THIS -->
    <td>foobar2</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="product-group" data-productid="SAP0032" data-id="Annual-46-42" data-optionid="462">
    </td>
    <!-- FIND THIS -->
    <td>foobar2</td>
  </tr>
</table>

JavaScript

$('table.availableProduct tr').click(function(e) {
  var inp = $(this).find('td .product-group');
  inp.prop('checked', !inp.prop('checked')); // toggle check and uncheck
  var dataAttributes = inp.data();
  console.log(dataAttributes);
});