JSFiddle - React, Tailwind, and code Playground

HTML

<h1>
  Size Inputs 1
</h1>
<variant-radio id="update-variant">
  <fieldset>
    <input type="radio" id='1' name="Size" value="XS" form="1">
    <label for="1">
      XS
    </label>

    <input type="radio" id="2" name="Size" value="S" form="1">
    <label for="2">
      S
    </label>

    <input type="radio" id="3" name="Size" value="M" form="1">
    <label for="3">
      M
    </label>
  </fieldset>

</variant-radio>

<h1>
  Size Inputs 2
</h1>
<variant-radio id="update-variant-2">
  <fieldset>
    <input type="radio" id="4" name="Size2" value="XS" form="2">
    <label for="4">
      XS
    </label>

    <input type="radio" id="5" name="Size2" value="S" form="2">
    <label for="5">
      S
    </label>

    <input type="radio" id="6" name="Size2" value="M" form="2">
    <label for="6">
      M
    </label>
  </fieldset>

</variant-radio>

JavaScript

(function() {
  document.getElementById('update-variant').addEventListener('click', function(event) {

    const mainselect = document.querySelector('input[name="Size"]:checked').value;
    const chartselect = document.querySelector('input[name="Size2"]:checked').value;

    if (chartselect != mainselect) {
      // not sure what to do here
      if (document.querySelector('input[name="Size2"]').value == mainselect) {

      }
    }

  })

})();