JSFiddle - React, Tailwind, and code Playground

HTML

<select id="continent">
</select>

<select id="country">
</select>

JavaScript

var json = {
    continents: {
        africa: {
            morroco: {
            },
            egypt: {
            }
        },
        europe: {
            germany: {
            },
            italy: {
            }
        },
        asia: {
            india: {
            },
            china: {
            }
        }
    }
};
    
(function init() {
    var $select = $('#continent')
    for (var continent in json.continents) {
        var $elm = $('<option>').attr('value', continent)
                                .html(continent);
        $select.append($elm);
    }
})();
    
$('#continent').change(function() {
    $('#country').children().remove();
    for (var country in json.continents[$(this).val()]) {
        var $elm = $('<option>').attr('value', country)
                                .html(country);
        $('#country').append($elm);
    }
})