JSFiddle - React, Tailwind, and code Playground

HTML

<form id="account-update-form" action="<?php echo get_stylesheet_directory_uri()?>/functions/updateacct.php" method="POST">
					<table id="accountinfo">
						<tr>
							<td>
								Studio Name
							</td>
							<td>
								<input type="text" name="Name" value="Test" required>
							</td>
						</tr>
						<tr>
							<td>
								Contact Name
							</td>
							<td>
								<input type="text" name="Contact" value="Test2" maxlength="50" required>
							</td>
						</tr>
						<tr>
							<td>
								Email Preference
							</td>
							<td>
								<select name="EmailPreference">
									<?php if ($row['EmailPreference'] == 1) { ?>
										<option value="1">You are currently receiving shipping notification emails, would you like to change this?</option>
									<?php } else if ($row['EmailPreference'] == 0) { ?>
										<option value="0">You are NOT currently receiving shipping notification emails, would you like to change this?</option>
									<?php } ?>
									<option value="1">I would like to receive shipping notification emails</option>
									<option value="0">I would not like to receive shipping notification emails</option>
								</select>
							</td>
						</tr>
					</table>
					<input class="g1-button g1-button--solid g1-button--small" type="submit" id="submit-data" value="Submit Changes" style="visibility:hidden">

					
					</form>

JavaScript

$('form')
		.each(function(){
			$(this).data('serialized', $(this).serialize())
		})
        .on('change input', function(){
            $(this)				
                .find('input:submit, button:submit')
                    .attr('visiblity="visible"', $(this).serialize() == $(this).data('serialized'))
            ;
         })
		.find('input:submit, button:submit')
			.attr('visiblity="visible"', true)
	;