JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<form id="page1">

Name: <input type="text" size="40" name="name1" >
<br><br>
<table border="1" cellpadding="5" width="50%">
<tbody>
<tr>
<td align="center" colspan="3"><strong>Membership Classification</strong></td>
</tr>
<tr><td width="1000">
<input name="paymethod" type="radio" class="pay" id="paypal" value="paypal" />I would like to use PayPal &#160;&#160;
<input name="paymethod" type="radio" class="pay" id="check" value="check" />I would like to pay by check
</td>
<td style="width:150px" align="right">Fee
</td>
<td style="width:150px">
</td></tr>
<tr>
<td><input name="memberclass" type="radio" class="membership" id="regular" value="regular"/> Regular Membership</td>
<td align="right"><div id=regularfee></td>
<td><div align="right" id=regselectedfee></td>
</tr>
<tr><td colspan="2" align="right">Total </td>
<td><div align="right" id=total>
</td></tr></tbody>
</table>

<input type="hidden" name="regularfee" id="regularfee" value="">
<input type="hidden" name="regselectedfee" id="regselectedfee" value="">
<input type="hidden" name="total" id="total" value="">
<br>
    <button type="button" id="gotopage2">Continue</button>
</form>

<form id="page2">
    <input type="text" name="field2" /><br />
<b>Page 2
<br><br>
<input type="button" id="B1" value="Go Back">

</form>
</body>
</html>

CSS

#page2 {
    display: none;
}

body{
	font: 10pt sans-serif;
}

JavaScript

var paypalselected
var checkselected
var regularfee
var memberfee1
var total

$(function () {

function clearForm()
{
     paypalselected = "0";
     checkselected = "0";
     regularfee = 0.0;
     memberfee1 = 0.0;
     total = 0.0;
     $("#regselectedfee").text(memberfee1.toFixed(2));
     $("#total").text(total.toFixed(2));
     // clear all radio buttons
     $("#regular").prop("checked", false );
}

function calcFees()
{
     total = (memberfee1);
     $("#total").text(total.toFixed(2));
}

function selectPayment()
{
    $(".pay").change(function () {
        clearForm();
        if ($("#paypal").prop("checked")) {

            regularfee = 26.50;
            $("#regularfee").text(regularfee.toFixed(2));
            paypalselected = "1";
            checkselected = "0";
           }
        if ($("#check").prop("checked")) {

            regularfee = 25.0;
            $("#regularfee").text(regularfee.toFixed(2));
            checkselected = "1";
            paypalselected = "0";
           }
      });
}

clearForm();
selectPayment();

//start of membership button selection

    $(".membership").change(function () {
     if (paypalselected == "1"){
        if ($("#regular").prop("checked")) {
            memberfee1 = 26.5;
            $("#regselectedfee").text(memberfee1.toFixed(2));
            calcFees();
            } 
         } //end of paypalselected test
      if (checkselected == "1"){
        if ($("#regular").prop("checked")) {
            memberfee1 = 25.0;
            $("#regselectedfee").text(memberfee1.toFixed(2));
            calcFees();
            } 
        } //end of checkselected test
      }); //end of $(".membership").change(function () {

});

// *****************************************************************

    $('#page1').validate({
        // rules
        rules: {
            name1: {
                required: true
            }
        }
    });

    $('#page2').validate({
        // rules,
        },
        submitHandler:...