Jquery Selector for Radio Inputs that are Required, But One Radio is Checked

I am building a form that includes a few radio buttons among other inputs. When the user first submits the form, they are taken to a page to review their responses and fill in any remaining required fields. For various reasons we don't want to run a complete validation on their initial form submission.

On the review page, all empty required fields are highlighted on page load. As the user fills the empty required fields, a script runs to remove the highlight on the newly filled input. Additionally some fields are conditionally marked required depending on input in previous fields.

All is working great, except for the radio buttons. When a user completes a field that should remove or add the required attribute and class on a subsequent radio input, the attribute is added/removed, but the highlight class is not added/removed. The highlight class should be added to the radio fields' parent container so the highlight outlines both radio buttons, not each of the two radio buttons.

Using Jquery, How do I properly check for a radio group that is required and one of two inputs is selected, then apply/remove a class to the radio group's parent?

function addHighlight() {
  $('input:required, textarea:required').each(function() {
    if ($(this).val() == "") {
      $(this).addClass('highlight');
    } else {
      $(this).removeClass('highlight');
    }
  });
  $("input[type='radio'][required]").each(function() {
    if ($('input[type="radio"][required]:not(:checked)')) {
      $(this).parent('.form-check').addClass('highlight');
    } else {
      $(this).parent('.form-check').removeClass('highlight');
    }
  });
};
$(document).ready(addHighlight);
$(":input").change(function() {
  addHighlight();
});

.highlight {
  border: 2px solid red;
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- Based on response to this input, the following radio input should be "required" or not -->
<fieldset class="form-group row">
  <div class="col-4 col-lg-3 ">
    <legend class="col-form-label">Are You a Citizen of the United States?</legend>
  </div>
  <div class="col-8 col-lg-6">

    <div class="form-check highlight">
      <input class="form-check-input" type="radio" name="emp_citizen" id="emp_citizen" value="Yes" required="">Yes
      <input class="form-check-input" type="radio" name="emp_citizen" id="emp_citizen" value="No" required="">No
    </div>

  </div>
</fieldset>

<!-- This radio input should be "required" and highlighted or not based on response to previous question. -->

<fieldset class="form-group row">
  <div class="col-4 col-lg-3 ">
    <legend class="col-form-label">If Not, Are You Authorized to Work in the U.S.?</legend>
  </div>
  <div class="col-8 col-lg-6">

    <div class="form-check">
      <input class="form-check-input" type="radio" name="emp_work_auth" id="emp_work_auth" value="Yes">Yes
      <input class="form-check-input" type="radio" name="emp_work_auth" id="emp_work_auth" value="No">No
    </div>

  </div>
</fieldset>

Solution

I found a few issues duplicate id's with attributes and Selector logic error

Use the same CSS and Update the following issue.

function addHighlight() {
  $('input:required, textarea:required').not('[type=radio]').each(function() {
    $(this).toggleClass('highlight', $(this).val().trim() === "");
  });

  const processed = new Set();

  $("input[type='radio'][required]").each(function() {
    const name = $(this).attr("name");
    if (processed.has(name)) return;
    processed.add(name);

    const group = $(`input[name='${name}']`);
    const checked = group.is(':checked');
    const container = group.first().closest('.form-check');
    container.toggleClass('highlight', !checked);
  });
}

function updateConditionalRequirements() {
  const isCitizen = $('input[name="emp_citizen"]:checked').val();
  const workAuth = $('input[name="emp_work_auth"]');
  workAuth.prop('required', isCitizen === "No");
}

$(function() {
  addHighlight();
  $(":input").on("change input", function() {
    updateConditionalRequirements();
    addHighlight();
  });
});

.highlight {
  border: 2px solid red;
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<fieldset class="form-group row">
  <div class="col-4 col-lg-3">
    <legend class="col-form-label">Are You a Citizen of the United States?</legend>
  </div>
  <div class="col-8 col-lg-6">
    <div class="form-check highlight">
      <input class="form-check-input" type="radio" name="emp_citizen" id="emp_citizen_yes" value="Yes" required>
      <label for="emp_citizen_yes">Yes</label>
      <input class="form-check-input" type="radio" name="emp_citizen" id="emp_citizen_no" value="No" required>
      <label for="emp_citizen_no">No</label>
    </div>
  </div>
</fieldset>

<fieldset class="form-group row">
  <div class="col-4 col-lg-3">
    <legend class="col-form-label">If Not, Are You Authorized to Work in the U.S.?</legend>
  </div>
  <div class="col-8 col-lg-6">
    <div class="form-check">
      <input class="form-check-input" type="radio" name="emp_work_auth" id="emp_work_auth_yes" value="Yes">
      <label for="emp_work_auth_yes">Yes</label>
      <input class="form-check-input" type="radio" name="emp_work_auth" id="emp_work_auth_no" value="No">
      <label for="emp_work_auth_no">No</label>
    </div>
  </div>
</fieldset>