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" class="countryCheckbox" value="uk"  /> United Kingdom
					</li>
					<li style=" width:147px;">
						<input type="checkbox" class="countryCheckbox" value="us"  /> United States
					</li>          
					<li style=" width:147px;">
						<input type="checkbox" class="countryCheckbox" value="ca"  /> Canada
					</li>          
			</ul>

JavaScript

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

  var countryCheckboxes = $('.countryCheckbox');
  var indicatorCheckboxes = $('.indicatorCheckbox');
  var checkboxes = $('.countryCheckbox, .indicatorCheckbox');

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

    if (selectedCountries.length > maxCountrySelection && selectedIndicators.length >= 1) {
      indicatorCheckboxes.prop('disabled', true);
    } else {
      indicatorCheckboxes.prop('disabled', false);
		}

	  if (selectedIndicators.length > maxIndicatorSelection && selectedCountries.length >= 1) {
      countryCheckboxes.prop('disabled', true);
    } else {
      countryCheckboxes.prop('disabled', false);
    }

	});
});