JSFiddle - React, Tailwind, and code Playground

HTML

<select class='option1'>
    <option>-------</option>
</select>
<select class='option2'>
    <option>-------</option>
</select>
<div class='putmehere1'></div>
<div class='putmehere2'></div>

CSS

.option2 {
    visibility: hidden;
}

JavaScript

var vartopass;

$('.option1').append("<option id='africa'>Africa</option><option id='india'>India</option><option id='namerica'>North America<option>");

$('.option1').on('change', function(){

    if( $(".option1 #africa").prop('selected') === true )
       {
       $('.option2').append("<option id='elephant'>Elephant</option><option id='rhinoceros'>Rhinoceros</option><option id='giraffe'>Giraffe</option>");
       $('.option2').css('visibility', 'visible');
       }

    if( $(".option1 #india").prop('selected') === true )
      {
       $('.option2').append("<option id='tiger'>Tiger</option><option id='waterbuffalo'>Water Buffalo</option><option id='snowleopard'>Snowleopard</option>");
       $('.option2').css('visibility', 'visible');
       }
 
    if( $(".option1 #namerica").prop('selected') === true )
      {
       $('.option2').append("<option id='deer'>Mule Deer</option><option id='elk'>Elk</option><option id='moose'>Moose</option>");
       $('.option2').css('visibility', 'visible');
       }        
});

$('.option2').on('change', function(){
    vartopass = $('.option2').children(":selected").attr("id");
    console.log( vartopass );
/*
This is a hypothetical data return from an ajax call that takes the data from your option list, passes it to a php file, the server returns JSON data, and it is parsed and loaded into divs.

$.ajax({
            type: "POST",
            url: "gogetthestuff.php",
            data: {animal: vartopass}
            .done(function(data){
                    $('.putmehere1').val(result.height);
                    $('.putmehere1').val(result.weight);
                                 });
        });
*/
    


//Hypothetical callback from JSON array returned by AJAX:
var animals = [
    {
    "elephant": {
        "height": "126",
        "weight": "6000"
    },
    "rhinocerus": {
        "height": "88",
        "weight": "4000"
    },
    "giraffe": {
        "height": "400",
        "weight": "2000"
    },
    "tiger": {
...