JSFiddle - React, Tailwind, and code Playground

HTML

<table class="product-list">         
          <tr>
            <th scope="col" class="heading">Heading 1</th>
            <th scope="col" class="opt">Subscribe</th>
            <th scope="col" class="opt">Un-subscribe</th>
          </tr>
          <tr>
            <th scope="row">Product 1</th>
            <td class="btn opt-in"><label>
                <input type="radio" name="radio1" value="radio1">
              </label></td>
            <td class="btn opt-out"><label>
                <input type="radio" name="radio1" value="radio2">
              </label></td>
          </tr>
          <tr>
            <th scope="row">Product 2</th>
            <td class="btn opt-in"><label>
                <input type="radio" name="radio2" value="radio3">
              </label></td>
            <td class="btn opt-out"><label>
                <input type="radio" name="radio2" value="radio4">
              </label></td>
          </tr>
          <tr>
            <th scope="row">Product 3</th>
            <td class="btn opt-in"><label>
                <input type="radio" name="radio3" value="radio5">
              </label></td>
            <td class="btn opt-out"><label>
                <input type="radio" name="radio3" value="radio6">
              </label></td>
          </tr>
          <tr>
            <th scope="row">Product 4</th>
            <td class="btn opt-in"><label>
                <input type="radio" name="radio4" value="radio7">
              </label></td>
            <td class="btn opt-out"><label>
                <input type="radio" name="radio4" value="radio8">
              </label></td>
          </tr>
          <tr class="unsubscribe-section group">
            <th colspan="3" scope="row"><label title="You will be un-subscribed from items of this group only">Un-subscribe from all <input type="checkbox" name="unsubs-chkbx-group-1" class="unsubs-chkbx-group"></label></th>
          </tr>
        </table>
<hr>
<table class="product-list">         
         ...

CSS

.heading  { width:400px; font-style:italic; font-weight:bold; }
.opt, .btn{ width:100px; text-align:center;  }
label { float:right; margin-right:43px; cursor:pointer; padding:3px; }
label:hover { background:#eee; }
input { cursor:pointer; }

.btn label.selected { background:#666; }

JavaScript

$(".unsubs-chkbx-group").change(function() {
    var $table = $(this).closest('tbody');
    
    // uncheck all
    $('tr:not(.group) input', $table).prop('checked', false);
    $('label', $table).removeClass('selected');
    
    if(this.checked) {
        var $elements = $('.opt-out', $table);
        $('label', $elements).addClass('selected');
        $('input', $elements).prop('checked', true);
    }
});

$('tbody input[type=radio]').change(function() {
    var $element = $(this);
    var $row = $element.closest('tr');
    $('label', $row).removeClass('selected');

    $element.parent().addClass('selected');
});