JSFiddle - React, Tailwind, and code Playground

by Professor Tom DeDonno

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
    <fieldset id="billingAddress" class="text">
            <legend>Billing Address</legend>
            <label for="billFName">First Name</label>
            <input id="billFName" name="BillingFirstName" type="text" required="required" />
            <label for="billLName">Last Name</label>
            <input id="billLName" name="BillingLastName" type="text" required="required" />
            <label for="billStreet">Street Address</label>
            <input id="billStreet" name="BillingStreet" type="text" required="required" />
            <label for="billCity">City</label>
            <input id="billCity" name="BillingCity" type="text" required="required" />
            <label for="billState">State</label>
            <select id="billState" name="BillingState" required>
            </select>
            <label for="billZip">Zip</label>
            <input id="billZip" name="BillingZip" type="number" required="required" />
            <label for="billPhone">Phone</label>
            <input id="billPhone" name="BillingPhone" type="number" required="required" />
            <div class="errorMessage"></div>
         </fieldset>
         <fieldset id="deliveryAddress" class="text">
            <legend>Delivery Address</legend>
            <div class="checks">
               <input id="sameAddr" name="SameAddress" type="checkbox" />
               <label for="sameAddr">same as billing address</label>
            </div>
            <label for="delivFName">First Name</label>
            <input id="delivFName" name="DeliveryFirstName" type="text" required="required" />
            <label for="delivLName">Last Name</label>
            <input id="delivLName" name="DeliveryLastName" type="text" required="required" />
            <label for="delivStreet">Street...

JavaScript

var states = [
"AL", "AK", "AZ", "AR", "CA", "CO", "CT",
"DE", "DC", "FL", "GA", "HI", "ID", "IL",
"IN", "IA", "KS", "KY", "LA", "ME", "MD",
"MA", "MI", "MN", "MS", "MO", "MT", "NE",
"NV", "NH", "NJ", "NM", "NY", "NC", "ND",
"OH", "OK", "OR", "PA", "RI", "SC", "SD",
"TN", "TX", "UT", "VT", "VA", "WA", "WV", 
"WI", "WY"];


function setStates( )
{
  //you do have HTML5 geolocation
   var i, o1, o2;
 
  for( i=0; i < states.length ; ++i ) {
    /* jQuery has shortcuts here */
    o1= new Option( states[i], i+1 );
    o2= new Option( states[i], i+1 );
    $(o2).innerHTMl = $(o1).innerHTML = states[i];
    $( 'select#billState' ).append( o1 );
    $( 'select#delivState').append( o2 );
  }                 
}

setStates( );


function copyBillingAddress( )
{
  var str;
  /* this is not a best practice id name */
  
  $( 'fieldset#billingAddress input' ).each( function( index ) {
    str = $(this).attr("id" );
    console.log( "index: " + index + ", " + $(this).val() + ", " + str );
    str = str.replace( "bill", "deliv" );
  $( "#"+str ).val( $(this).val() );
      } );
} //end function copyBillingAddress

$( '#sameAddr').bind( 'change', function() {
  
  if( $(this).is(':checked') )
    copyBillingAddress( );
  else
    console.log( "for now do nothing" ); 
}); //end bind