JSFiddle - React, Tailwind, and code Playground

HTML

<table align="center" cellpadding="5" bgcolor="#dddddd" width="800px">
  <tr>
    <td colspan="6">Je bent ingelogd als helpmij</td>
  </tr>
<form name="addcontactform" enctype="multipart/form-data" action="" method="post">
  <tr>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td style="border: 2px solid #000099"><table align="center">
        <tr>
          <td align="center" colspan="6"><h2 align="center" style="text-decoration: underline; color: #0000ff">Gegevens</h2></td>
        </tr>
        <tr>
          <td>Voornaam:</td>
          <td colspan="3"><input type="text" size="35" tabindex="1" maxlength="50" value="" name="firstname" /></td>
          <td rowspan="4" colspan="2" valign="top">Interesses:<br />
            <textarea  cols="37" rows="6" tabindex="16" name="interests"></textarea></td>
        </tr>
        <tr>
          <td>Naam:</td>
          <td colspan="3"><input type="text" size="35" tabindex="2" maxlength="50" value="" name="name" /></td>
        </tr>
        <tr>
          <td>Straat:</td>
          <td colspan="3"><input type="text" size="35" tabindex="3" maxlength="100" value="" name="street" /></td>
        </tr>
        <tr>
          <td>Nummer:</td>
          <td><input type="text" size="5" tabindex="4" maxlength="5" value="" name="number" /></td>
          <td align="right">Bus:</td>
          <td align="right"><input type="text" tabindex="5" size="5" maxlength="5" value="" name="box" /></td>
        </tr>
        <tr>
          <td>Postcode:</td>
          <td colspan="3"><input type="text" size="5" maxlength="4" value="" name="zipcode" />
            <input type="hidden" value="" name="location_id" /></td>
          <td rowspan="4" colspan="2" valign="top">Notities:<br />
            <textarea  cols="37" rows="6" tabindex="17" name="notes"></textarea></td>
        </tr>
        <tr>
          <td>Gemeente:</td>
          <td colspan="3"><input type="text" size="35" tabindex="6" maxlength="50" value="" name="location"...

JavaScript

var acountries = [];
var aregions = new Array();
var azipcodes = new Array();

function getzipcode(sloc) {
	alert(sloc);
    return;
	var nregionid;
	for (var nzc = 0; nzc <= azipcodes.length; nzc++) {
		if (sloc.toLowerCase() == azipcodes[nzc]["location"].toLowerCase()) {
			document.addcontactform.zipcode.value = azipcodes[nzc]["zipcode"];
			document.addcontactform.location_id.value = azipcodes[nzc]["id"];
			nregionid = azipcodes[nzc]["regionid"];
		};
	};
	getregion(nregionid);
};

function getregion(id) {
	var ncountryid;
	for (var nrc = 0; nrc <= aregions.length; nrc++) {
		if (id == aregions[nrc]["id"]) {
			document.addcontactform.region.value = aregions[nrc]["region"];
			document.addcontactform.country_id.value = aregions[nrc]["countryid"];
			nregionid = azipcodes[nzc]["regionid"];
		};
	};
	getcountry(ncountryid);
};

function getcountry(id) {
	for (var ncc = 0; ncc <= acountries.length; ncc++) {
		if (id == acountries[ncc]["id"]) {
			document.addcontactform.country.value = acountries[ncc]["country"];
		};
	};
};

acountries[0]['id'] = 1;
acountries[0]['country'] = 'Afghanistan';
acountries[0]['code'] = 93;
acountries[1]['id'] = 2;
acountries[1]['country'] = 'Albania';
acountries[1]['code'] = 355;
acountries[2]['id'] = 3;
acountries[2]['country'] = 'Algeria';
acountries[2]['code'] = 213;
acountries[3]['id'] = 4;
acountries[3]['country'] = 'American Samoa';
acountries[3]['code'] = 1684;
acountries[4]['id'] = 5;
acountries[4]['country'] = 'Andorra';
acountries[4]['code'] = 376;
acountries[5]['id'] = 6;
acountries[5]['country'] = 'Angola';
acountries[5]['code'] = 244;
acountries[6]['id'] = 7;
acountries[6]['country'] = 'Anguilla';
acountries[6]['code'] = 1264;
acountries[7]['id'] = 8;
acountries[7]['country'] = 'Antarctica';
acountries[7]['code'] = 672;
acountries[8]['id'] = 9;
acountries[8]['country'] = 'Antigua and Barbuda';
acountries[8]['code'] = 1268;
acountries[9]['id'] = 10;
acountries[9]['country'] = 'Argentina';
acountries[9]['code'] =...