JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="one" type="text" name="variants" value="" />

<label><input class="checkbox" data-class="one" type="checkbox" name="xxs">xxs</label>
<label><input class="checkbox" data-class="one" type="checkbox" name="xs">xs</label>
<label><input class="checkbox" data-class="one" type="checkbox" name="s">s</label>
<label><input class="checkbox" data-class="one" type="checkbox" name="m">m</label>
<label><input class="checkbox" data-class="one" type="checkbox" name="l">l</label>

<input class="two" type="text" name="variants" value="" />

<label><input class="checkbox" data-class="two" type="checkbox" name="xxs">xxs</label>
<label><input class="checkbox" data-class="two" type="checkbox" name="xs">xs</label>
<label><input class="checkbox" data-class="two" type="checkbox" name="s">s</label>
<label><input class="checkbox" data-class="two" type="checkbox" name="m">m</label>
<label><input class="checkbox" data-class="two" type="checkbox" name="l">l</label>

JavaScript

function handler (el_class) {
	const items = document.querySelectorAll('*[data-class="' + el_class + '"].checkbox:checked');
	const input = document.querySelector('.' + el_class);
  input.value = [...items].map(e => e.name).join(',');
}

$('.checkbox').each(function(index, element) {
  $(element).on('change', function() {
  		const input_class = $(this).data('class');
  		handler(input_class);
  });
});