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);

			} else {
				var cities = '<option value="0">All<option/>';
				if($.isArray(id)) {
					$.each(id, function(i, id){
						$.each(selectData, function(i, country){
						if(country.id === id) {
							$.each(country.city, function(i, city) {
			    			cities +='<option value="'+city.id+'">'+city.name+'<option/>';
			    			});
						}
			    		
						});

					})
				} else {
					$.each(selectData, function(i, country){
						if(country.id === id) {
							$.each(country.city, function(i, city) {
			    			cities +='<option value="'+city.id+'">'+city.name+'<option/>';
			   ...