Cities does not populate on datalist when province selected

Question

Hi guys please help me resolve this

City field will only show an already filtered list based on the province selected

• I was able to populate the provinces but the cities don't appear, i want to use datalist so customer can type and see suggestions on the dropdown

This is the code that I am currently working on.

var cities = {
 'Abra': [
  'Bangued', 'Boliney', 'Bucay', 'Bucloc', 'Daguioman', 'Danglas',
  'Dolores', 'La Paz', 'Lacub', 'Lagangilang', 'Lagayan', 'Langiden',
  'Licuan-Baay', 'Luba', 'Malibcong', 'Manabo', 'Peñarrubia', 'Pidigan',
  'Pilar', 'Sallapadan', 'San Isidro', 'San Juan', 'San Quintin', 'Tayum',
  'Tineg', 'Tubo', 'Villaviciosa'
 ],
 'Agusan\xa0del\xa0Norte': [
  'Buenavista', 'Butuan', 'Cabadbaran', 'Carmen', 'Jabonga', 'Kitcharao',
  'Las Nieves', 'Magallanes', 'Nasipit', 'Remedios T. Romualdez', 'Santiago',
  'Tubay'
 ],
 'Agusan\xa0del\xa0Sur': [
  'Bayugan', 'Bunawan', 'Esperanza', 'La Paz', 'Loreto', 'Prosperidad',
  'Rosario', 'San Francisco', 'San Luis', 'Santa Josefa', 'Sibagat',
  'Talacogon', 'Trento', 'Veruela'
 ],
}

var City = function () {

 this.p = [], this.c = [], this.a = [], this.e = {};
 window.onerror = function () {
  return true;
 }

 this.getProvinces = function () {
  for (let province in cities) {
   this.p.push(province);
  }
  return this.p;
 }
 this.getCities = function (province) {
  if (province.length == 0) {
   console.error('Please input province name');
   return;
  }
  for (let i = 0; i <= cities[province].length - 1; i++) {
   this.c.push(cities[province][i]);
  }
  return this.c;
 }
 this.getAllCities = function () {
  for (let i in cities) {
   for (let j = 0; j <= cities[i].length - 1; j++) {
    this.a.push(cities[i][j]);
   }
  }
  this.a.sort();
  return this.a;
 }
 this.showProvinces = function (element) {
  var str = '<option disabled selected value="">Select Province</option>';
  for (let i in this.getProvinces()) {
   str += '<option value=' + this.p[i] + '>' + this.p[i] + '</option>';
  }
  this.p = [];
  document.querySelector(element).innerHTML = '';
  document.querySelector(element).innerHTML = str;
  this.e = element;
  return this;
 }
 this.showCities = function (province, element) {
      var str = '<option disabled selected value="">Select City / Municipality</option>';
      //added value="" to meet 0 length & render an error message when no province or city is selected
  var elem = '';
  if ((province.indexOf(".") !== -1 || province.indexOf("#") !== -1)) {
   elem = province;
  } else {
   for (let i in this.getCities(province)) {
    str += '<option value="' + this.c[i] + '">' + this.c[i] + '</option>';
              //added "" for value's content so spaces can be registered into order details
   }
   elem = element;
  }
  this.c = [];
  document.querySelector(elem).innerHTML = '';
  document.querySelector(elem).innerHTML = str;
  document.querySelector(this.e).onchange = function () {
   var Obj = new City();
   Obj.showCities(this.value, elem);
  }
  return this;
 }
}

window.onload = function() { 
 var $ = new City();
 $.showProvinces("#province");
  $.showCities("#city");
}

<input required class="required" list="province" name="attributes[Province]" value="" placeholder="Select Province" />
<datalist id="province"></datalist>

<input required class="required" list="city" name="attributes[City]" value="" placeholder="Select City/Municipality" />
<datalist id="city"></datalist>