JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<h1>
Products
</h1>
<ul class="category filterBox1" id="category_{$id}">
                  <li id="" val="" class="indicatorItem">
                    <input type="checkbox" class="indicatorCheckbox" value="product_1">
                    <a>Product 4</a>
                  </li>
                  <li id="" val="" class="indicatorItem">
                    <input type="checkbox" class="indicatorCheckbox" value="product_2">
                    <a>Product 4</a>
                  </li>
                  <li id="" val="" class="indicatorItem">
                    <input type="checkbox" class="indicatorCheckbox" value="product_3">
                    <a>Product 4</a>
                  </li>
                  <li id="" val="" class="indicatorItem">
                    <input type="checkbox" class="indicatorCheckbox" value="product_4">
                    <a>Product 4</a>
                  </li>
              </ul>
<h1>
Countries
</h1>    
			<ul id="countriesBox" class="filterCheckBox fl">
					<li style=" width:147px;">
						<input type="checkbox" value="uk"  /> United Kingdom
					</li>
					<li style=" width:147px;">
						<input type="checkbox" value="us"  /> United States
					</li>          
					<li style=" width:147px;">
						<input type="checkbox" value="ca"  /> Canada
					</li>          
			</ul>

JavaScript

$(document).ready(function() {
  var maxCountrySelection = 1;
  var maxIndicatorSelection = 1;

  var countryCheckboxes = $('input[type="checkbox"].countryCheckbox');
  var indicatorCheckboxes = $('input[type="checkbox"].indicatorCheckbox');

  countryCheckboxes.change(function() {
    var selectedCountries = countryCheckboxes.filter(':checked');
    var selectedIndicators = indicatorCheckboxes.filter(':checked');

    if (selectedCountries.length > maxCountrySelection) {
      countryCheckboxes.not(this).prop('checked', false).prop('disabled', true);
    } else {
      countryCheckboxes.prop('disabled', false);
    }

    if (selectedIndicators.length > 0) {
      indicatorCheckboxes.not(':checked').prop('disabled', true);
    } else {
      indicatorCheckboxes.prop('disabled', false);
    }
  });

  indicatorCheckboxes.change(function() {
    var selectedCountries = countryCheckboxes.filter(':checked');
    var selectedIndicators = indicatorCheckboxes.filter(':checked');

    if (selectedIndicators.length > maxIndicatorSelection) {
      indicatorCheckboxes.not(this).prop('checked', false).prop('disabled', true);
    } else {
      indicatorCheckboxes.prop('disabled', false);
    }

    if (selectedCountries.length > 0) {
      countryCheckboxes.not(':checked').prop('disabled', true);
    } else {
      countryCheckboxes.prop('disabled', false);
    }
  });
});