JSFiddle - React, Tailwind, and code Playground

by sghoush1

HTML

<div>creditcard</div>
<input type="radio" name="payment" value="creditcard">
<div>paypal</div>
<input type="radio" name="payment" value="paypal">
<form id="payment">
  <input class="required" type="text" id="address1">
  <input type="text" id="address2">
  <input class="required" type="text" id="zipcode">
</form>

CSS

.requiredFalse {
  border: 1px solid black;
}

.required {
  border: 1px solid red;
}

JavaScript

$('input[name*="payment"]').on('change', function() {
  var type = this.value;
  switch (type) {
    case 'paypal':
      $('#payment input').each(function() {
        if ($(this).hasClass('required')) {
          $(this).removeClass('required');
          $(this).addClass('requiredFalse');
        }
      });
    case 'creditcard':
      $('#payment input').each(function() {
        if ($(this).hasClass('requiredFalse')) {
          $(this).addClass('required');
          $(this).removeClass('requiredFalse');
        }
      });
  }
})