Why the cities and dealers dropdown are not showing up?

Question

Can anyone help me fix this code? The cities and dealers dropdown are not showing up

{% comment %}
  Dealer Locator - Fixed Version
{% endcomment %}

<style>
  .dealer-locator {
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .dealer-container {
    display: flex;
    gap: 40px;
    align-items: flex-start;
  }

  .image-column {
    flex: 1;
  }

  .image-column img {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }

  .form-column {
    flex: 1;
  }

  .locator-form label {
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 5px;
    display: block;
  }

  .locator-form select {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  .back-home {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 24px;
    background-color: #4CAF50;
    color: white;
    text-decoration: none;
    border-radius: 5px;
  }

  @media (max-width: 768px) {
    .dealer-container {
      flex-direction: column;
    }
  }
</style>

<div class="dealer-locator">
  <div class="dealer-container">
    <div class="image-column">
      {% if section.settings.dealer_image %}
        <img src="{{ section.settings.dealer_image | image_url: width: 800 }}" alt="{{ section.settings.image_alt_text }}">
      {% endif %}
    </div>

    <div class="form-column">
      <h2>{{ section.settings.heading | default: 'Dealer Locator' }}</h2>
      
      <div class="locator-form">
        <label for="province">Select Province *</label>
        <select id="province">
          <option value="">Select One</option>
          {% for block in section.blocks %}
            <option value="{{ block.settings.province_name }}">{{ block.settings.province_name }}</option>
          {% endfor %}
        </select>

        <label for="city">Select City / Municipality</label>
        <select id="city" disabled>
          <option value="">Select One</option>
        </select>

        <label for="dealer">Select Dealer Name</label>
        <select id="dealer" disabled>
          <option value="">Select One</option>
        </select>

        <a href="{{ routes.root_url }}" class="back-home">BACK TO HOMEPAGE</a>
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    var provinceSelect = document.getElementById("province");
    var citySelect = document.getElementById("city");
    var dealerSelect = document.getElementById("dealer");

    var dealerData = {
      {% for block in section.blocks %}
        "{{ block.settings.province_name }}": {
          {% assign city_list = block.settings.cities | split: "|" %}
          "cities": {
            {% for city in city_list %}
              {% assign city_parts = city | split: ":" %}
              "{{ city_parts[0] }}": [
                {% assign dealers = city_parts[1] | split: "," %}
                {% for dealer in dealers %}"{{ dealer }}"{% unless forloop.last %}, {% endunless %}
                {% endfor %}
              ]
              {% unless forloop.last %}, {% endunless %}
            {% endfor %}
          }
        }
        {% unless forloop.last %}, {% endunless %}
      {% endfor %}
    };

    provinceSelect.addEventListener("change", function () {
      var selectedProvince = this.value;
      citySelect.innerHTML = '<option value="">Select One</option>';
      dealerSelect.innerHTML = '<option value="">Select One</option>';
      citySelect.disabled = true;
      dealerSelect.disabled = true;

      if (selectedProvince && dealerData[selectedProvince]) {
        var cities = dealerData[selectedProvince].cities;
        citySelect.disabled = false;
        for (var city in cities) {
          var option = document.createElement("option");
          option.value = city;
          option.textContent = city;
          citySelect.appendChild(option);
        }
      }
    });

    citySelect.addEventListener("change", function () {
      var selectedProvince = provinceSelect.value;
      var selectedCity = this.value;
      dealerSelect.innerHTML = '<option value="">Select One</option>';
      dealerSelect.disabled = true;

      if (selectedProvince && selectedCity && dealerData[selectedProvince]) {
        var dealers = dealerData[selectedProvince].cities[selectedCity];
        if (dealers) {
          dealerSelect.disabled = false;
          dealers.forEach(function (dealer) {
            var option = document.createElement("option");
            option.value = dealer;
            option.textContent = dealer;
            dealerSelect.appendChild(option);
          });
        }
      }
    });
  });
</script>

{% schema %}
{
  "name": "Dealer Locator",
  "settings": [
    {
      "type": "image_picker",
      "id": "dealer_image",
      "label": "Dealer Image"
    },
    {
      "type": "text",
      "id": "image_alt_text",
      "label": "Image Alt Text",
      "default": "Dealer Location Map"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Section Heading",
      "default": "Dealer Locator"
    }
  ],
  "blocks": [
    {
      "type": "province",
      "name": "Province",
      "settings": [
        {
          "type": "text",
          "id": "province_name",
          "label": "Province Name"
        },
        {
          "type": "textarea",
          "id": "cities",
          "label": "Cities & Dealers (Format: City1:Dealer1,Dealer2|City2:Dealer3)",
          "default": "Makati:Dealer A,Dealer B|Quezon City:Dealer C,Dealer D"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Dealer Locator",
      "blocks": []
    }
  ]
}
{% endschema %}