JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset id="location-fieldset">
    <legend>Choose your pickup location</legend>
    <div class="pu-country-container ">
        <label for="pu-country">Country</label>
        <select id="pu-country" name="country">
            <option value="0">Choose</option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
        </select>
    </div>
    <div class="pu-city-container ">
        <label for="pu-city">City</label>
        <select id="pu-city" name="city" disabled="">
            <option value="0">Choose</option>
        </select>
    </div>
    <div class="pu-location-container ">
        <label for="pu-location">Location</label>
        <select id="pu-location" name="location" disabled="">
            <option value="0">Choose</option>
        </select>
    </div>
</fieldset>

JavaScript

var x;

$('#pu-country').on('change', function () {
    if (this.value != '0') {
        $('#pu-city').prop('disabled', false);
        $('#pu-city').find("option").not(":first").remove();
        $('#pu-location').prop('disabled', true);
        $('#pu-location').val("Choose");
        switch (this.value) {
            case 'A':
                x = '<option value="A.1">A.1</option><option value="A.2">A.2</option><option value="A.3">A.3</option>'
                break;
            case 'B':
                x = '<option value="B.1">B.1</option><option value="B.2">B.2</option><option value="B.3">B.3</option>'
                break;
            case 'C':
                x = '<option value="C.1">C.1</option><option value="C.2">C.2</option><option value="C.3">C.3</option>'
                break;
        }
        $('#pu-city').append(x)
    } else {
        $('#pu-location').prop('disabled', true);
        $('#pu-location').val("Choose");
        $('#pu-city').prop('disabled', true);
        $('#pu-city').val("Choose");
    }


});

$('#pu-city').on('change', function () {
    if (this.value != '0') {
        $('#pu-location').prop('disabled', false);
        $('#pu-location').find("option").not(":first").remove();

        switch (this.value) {
            case 'A.1':
                x = '<option value="A.1.1">A.1.1</option><option value="A.1.2">A.1.2</option><option value="A.1.3">A.1.3</option>'
                break;
            case 'A.2':
                x = '<option value="A.2.1">A.2.1</option><option value="A.2.2">A.2.2</option><option value="A.2.3">A.2.3</option>'
                break;
            case 'A.3':
                x = '<option value="A.3.1">A.3.1</option><option value="A.3.2">A.3.2</option><option value="A.3.3">A.3.3</option>'
                break;
            case 'B.1':
                x = '<option value="B.1.1">B.1.1</option><option value="B.1.2">B.1.2</option><option value="B.1.3">B.1.3</option>'
                break;
            case 'B.2':
...