JSFiddle - React, Tailwind, and code Playground

HTML

<select id="teamid">
</select>

<select id="teamname">
</select>

JavaScript

var json = {
    "TeamList": [
        {
            "teamid": "4",
            "teamname": "Man United"
        },
        {
            "teamid": "3",
            "teamname": "Chelsea"
        },
        {
            "teamid": "9",
            "teamname": "Arsenall"
        },
        {
            "teamid": "1",
            "teamname": "Liverpool"
        }
    ]
};

var teams = json['TeamList'];
    
(function init() {
    var $select = $('#teamid');
    
    for (var i=0; i<teams.length; i++) {
        var id = teams[i]['teamid'];
        var $elm = $('<option>').val(id).html(id);
        $select.append($elm);
    }
})();
    
$('#teamid').change(function() {
    var $t = $(this);
    var $select = $('#teamname');
    var findIndex = function() {
        for (var i=0; i<teams.length; i++) {
            if (teams[i]['teamid'] == $t.val()) {
                return i;
            }
        }
    }
    var name = teams[findIndex()]['teamname'];
    var $elm = $('<option>').val(name).html(name);
    
    $select.children().remove();
    $select.append($elm);
})