JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<form action="/Declarations" id="declarationsForm" method="post">
  <table width="100%" id="Ken Customer" style="border: thin solid gray">
    <tr>
      <td>Are you a U.S. citizen?</td>
      <td>
        <input Name="ApplicantPairs[0].PrimaryBorrower.Declarations.USCitizen" class="National USCitizen" data-val="true" data-val-required="The USCitizen field is required." id="rdoUSCitizen-816198-yes" type="radio" value="True" />
        <label for="rdoUSCitizen-816198-yes">Yes</label>
        <input Name="ApplicantPairs[0].PrimaryBorrower.Declarations.USCitizen" checked="checked" class="National USCitizen" id="rdoUSCitizen-816198-no" type="radio" value="False" />
        <label for="rdoUSCitizen-816198-no">No</label>
      </td>
    </tr>
    <tr>
      <td>Are you a Permanent Resident Alien?</td>
      <td>
        <input Name="ApplicantPairs[0].PrimaryBorrower.Declarations.PermanentResidentAlien" checked="checked" class="National PermanentResidentAlien" data-val="true" data-val-required="The PermanentResidentAlien field is required." id="rdoPermanentResidentAlien-816198-yes"
        type="radio" value="True" />
        <label for="rdoPermanentResidentAlien-816198-yes">Yes</label>
        <input Name="ApplicantPairs[0].PrimaryBorrower.Declarations.PermanentResidentAlien" class="National PermanentResidentAlien" id="rdoPermanentResidentAlien-816198-no" name="" type="radio" value="False" />
        <label for="rdoPermanentResidentAlien-816198-no">No</label>
      </td>
    </tr>
  </table>
</form>

JavaScript

$(function() {
  $("#declarationsForm").on("click", ".National", function(e) {
    var btnId = $(this).attr("id");
    var typeItem = btnId.substring(0, 3);
    var dashIndex = btnId.indexOf("-");
    var ctrl = btnId.substring(3, dashIndex);
    var applicantId = btnId.substring(btnId.indexOf("-") + 1, btnId.indexOf("-", btnId.indexOf("-") + 1));
    var usCit = "rdoUSCitizen-" + applicantId;
    var forNat = "rdoForeignNat-" + applicantId;
    var resAlien = "rdoPermanentResidentAlien-" + applicantId;
    var btn = $("#" + btnId);
    console.log(btnId, typeItem, dashIndex, ctrl, applicantId, usCit, forNat, resAlien);
    if ($(this).hasClass("USCitizen")) {
      // US Cit. is set to "No"
      // Uncheck Perm. Res. Yes
      console.log("Unchecking Perm. Res. Alien Yes.");
      $("#" + resAlien + "-yes").prop("checked", false);
    }
  });
});