JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<form>

    <div class="form-group">
        <label for="countries">Countries: </label>
        <select class="select2" id="countries" name="countries" multiple="multiple" style="width: 50%">
            <option></option>
        </select>
    </div>

    <div class="form-group">
        <label for="cities">Cities: </label>
        <select class="select2" id="cities" name="cities" multiple="multiple" style="width: 50%">
        </select>
    </div>

    <button type="submit" class="btn btn-default">Submit</button>

</form>

JavaScript

var selectData = [{
    "id": "1",
    "name": "United States",
    "city": [{
        "country_id": "1",
        "id": "1",
        "name": "New York City"
    }, {
        "country_id": "1",
        "id": "2",
        "name": "Los Angeles"
    }, {
        "country_id": "1",
        "id": "3",
        "name": "Chicago"
    }, {
        "country_id": "1",
        "id": "4",
        "name": "Hustan"
    }]
}, {
    "id": "2",
    "name": "India",
    "city": [{
        "country_id": "2",
        "id": "5",
        "name": "Mumbai"
    }, {
        "country_id": "2",
        "id": "6",
        "name": "Delhi"
    }, {
        "country_id": "2",
        "id": "7",
        "name": "Bangalore"
    }, {
        "country_id": "2",
        "id": "8",
        "name": "Chennai"
    }]
}, {
    "id": "3",
    "name": "China",
    "city": [{
        "country_id": "3",
        "id": "9",
        "name": "Guangzhou"
    }, {
        "country_id": "3",
        "id": "10",
        "name": "Shanghai"
    }, {
        "country_id": "3",
        "id": "11",
        "name": "Chongqing"
    }, {
        "country_id": "3",
        "id": "12",
        "name": "Beijing"
    }]
}];

$("document").ready(function() {

    function getCountryId() {
        return $("#countries").val();
    }

    var $select1 = $("#countries"),
        $select2 = $("#cities");

    var countries = '<option value="0">All</option>';
    $.each(selectData, function(i, country) {
        countries += '<option value="' + country.id + '">' + country.name + '</option>';
    });
    $select1.html(countries);

    function createCities(id = null) {
        if (!id || id == 0) {
            var cities = '<option value="0">All</option>';
            $.each(selectData, function(i, country) {
                $.each(country.city, function(i, city) {
                    cities += '<option value="' + city.id + '">' + city.name + '</option>';
                });
            });
            $select2.html(cities);

        }...