JSFiddle - React, Tailwind, and code Playground

HTML

<form action="#">
<div class="form-group">
  <div class="small">
  <input type="radio" name="sex" value="Male" class="required" > Male
 </div>

<div class="small">
  <input type="radio" name="sex" value="Female" class="required"> Female
</div>

</div>

<div class="form-group">

  <div class="small">
  <input type="radio" name="abc" value="Male" class="required" > text1
 </div>

<div class="small">
  <input type="radio" name="abc" value="Female" class="required"> text2
</div>

</div>



  <input type="submit" value="Submit" class="registerBtn">
</form>

JavaScript

$(document).ready(function(){
     $('.registerBtn').on({
        click: function(evnt){
 					$('div.form-group:first input[type=radio]:checked').parent().css({'background':'red'});
          	evnt.preventDefault();
             $('input[type=radio]:checked').each(function(index,element){
            	console.log($(element).val());
            });
           
            
        }
   });
});