JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <fieldset>
        <legend>Whatever1</legend>
        <div class="checkbox-list">
            <label class="checkbox inline"><input type="checkbox" name="Hobbies" value="Arts"> Arts</label>
            <label class="checkbox inline"><input type="checkbox" name="Hobbies" value="Bars"> Bars</label>
            <label class="checkbox inline"><input type="checkbox" name="Hobbies" value="Books"> Books</label>
            (more items)
        </div>
    </fieldset>
    <fieldset>
        <legend>Whatever2</legend>
        <div class="checkbox-list">
            <label class="checkbox inline"><input type="checkbox" name="Interests" value="Architecture"> Architecture</label>
            <label class="checkbox inline"><input type="checkbox" name="Interests" value="Audio"> Audio/vĂ­deo</label>
            <label class="checkbox inline"><input type="checkbox" name="Interests" value="Business"> Business</label>
            (more items)            
        </div>
    </fieldset>
    <input type="hidden" id="your-hidden-input" />
    <input type="Submit" value="Submit" />
</form>

JavaScript

$("form").on("submit", function(e) {
  e.preventDefault();

  var uncheckedValues = [];
  $(this).find("input[name='Hobbies']:not(:checked)").each(function() {
    uncheckedValues.push(this.value);
  });
    $(this).find("input[name='Interests']:not(:checked)").each(function() {
    uncheckedValues.push(this.value);
  });
  $("#your-hidden-input").val(uncheckedValues);
  alert($("#your-hidden-input").val());
  handleFormSubmit();
});