JSFiddle - React, Tailwind, and code Playground

by calder12

HTML

<form action="">
  <input class="radio-btn reg" type="radio" name="registration" value="50" checked="checked"> Registration 1 $50<br>
  <input class="radio-btn reg" type="radio" name="registration" value="75"> Registration 2 $75<br>
  <input class="radio-btn reg" type="radio" name="registration" value="100"> Registration 3 $100<br>
  <input class="radio-btn" type="radio" name="price" value="25" checked="checked"> Dinner 1 $25<br>
  <input class="radio-btn" type="radio" name="price" value="15"> Dinner 2 $15<br>
  <input class="radio-btn" type="radio" name="price" value="10"> Dinner 3 $10<br>
  <input id="registration-fee" name="RegistrationFee" type="text" value="25" readonly/>
  <input id="thursday-dinner-fee" name="ThursdayDinnerFee" type="text" value="50" readonly/>
  <input id="amount-due" name="AmountDue" type="text" value="75" readonly  />
</form>

JavaScript

$(".radio-btn").on("click", function(){
	var $registration = parseInt($("input[name=registration]:radio:checked").val());
  var $dinner = parseInt($("input[name=price]:radio:checked").val());
	if( $(this).hasClass("reg") ) {
  	$registration = parseInt($(this).val());
  } else {
  	$dinner = parseInt($(this).val());
  }
	$("#thursday-dinner-fee").val($dinner);
	$("#registration-fee").val($registration);
  var total = $dinner + $registration;
  $("#amount-due").val(total);
});