JSFiddle - React, Tailwind, and code Playground

by Professor Tom DeDonno

HTML

<fieldset id="billingAddress" class="text">
          <legend>Billing Address</legend>
            <label for="billFName">First Name</label>
            <input id="billFName" name="BillingFirstName" type="text"
				   placeholder="name"
				   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="required">
               <option value="AL">AL</option>
               <option value="AK">AK</option>
               <option value="AZ">AZ</option>
               <option value="AR">AR</option>
               <option value="CA">CA</option>
               <option value="CO">CO</option>
               <option value="CT">CT</option>
               <option value="DE">DE</option>
               <option value="DC">DC</option>
               <option value="FL">FL</option>
               <option value="GA">GA</option>
               <option value="HI">HI</option>
               <option value="ID">ID</option>
               <option value="IL">IL</option>
               <option value="IN">IN</option>
               <option value="IA">IA</option>
               <option value="KS">KS</option>
               <option value="KY">KY</option>
               <option value="LA">LA</option>
               <option value="ME">ME</option>
               <option value="MD">MD</option>
               <option value="MA">MA</option>
               <option value="MI">MI</option>
               <option value="MN">MN</option>
               <option value="MS">MS</option>
               <option...

JavaScript

function copyBillingAddress() {
	var billingInputElements = 
      document.querySelectorAll("#billingAddress input");
	var deliveryInputElements = 
      document.querySelectorAll("#deliveryAddress input");
    var i;
	if(document.getElementById("sameAddr").checked) {
		for (i= 0; i < billingInputElements.length; i++) {
         deliveryInputElements[i + 1].value = 
                          billingInputElements[i].value;
		}

		document.querySelector("#deliveryAddress select").value = document.querySelector("#billingAddress select").value;
	}
	else {
		for (i = 0; i < billingInputElements.length; i++) {
			deliveryInputElements[i+1].value = "";
		}
		document.querySelector("#deliveryAddress select").selectedIndex = -1;
	}
}


var same = document.getElementById("sameAddr");
if (same.addEventListener) {
		same.addEventListener("click", copyBillingAddress, false);
	} 
	else if (same.attachEvent) {
		same.attachEvent("onclick", copyBillingAddress);
	}