第一个元素在第一次调试中没有同时出现第二个元素

Here is my code. Please kindly help me because I don't have any basic Javascript programming. The second element and button did not appear if user NOT SELECT OTHERS from first drop down list. Then the selection couldn't submit because the button didn't appear. If user select OTHERS from first drop down list, the second element and button will be appear or visible. What is causing this?

<html>
<head>
<title></title>
<script>
function checkchange() {
    if (document.getElementById('favouritecolour').value == 'OTHERS') {
        document.getElementById('other').style.display='block';
    } else {
        document.getElementById('other').style.display='none';
    }
};


function check() {
    if (document.getElementById('pets').value == 'OTHERS') {
       document.getElementById('besides').style.display='block';
    } else {
        document.getElementById('besides').style.display='none';
    }
};
</script>
</head>
<body>
<select id='favouritecolour' onChange='checkchange()'>
    <option value='BLUE'>BLUE</option>
    <option value='RED'>RED</option>
    <option value='OTHERS'>OTHERS</option>
</select>
<div id='other' style="display: none">
    <input type='text' placeholder="FILL IN"/><br/>
    <select id='pets' onChange='check()'>
        <option value='DOG'>DOG</option>
        <option value='RABBIT'>RABBIT</option>
        <option value='OTHERS'>OTHERS</option>
</select>
<div id='besides' style="display: none">
    <input type='text' placeholder="FILL IN"/>
    <input type="submit" name="SUBMIT" />
</div>
</body>
</html>

<html>
<head>
 <title></title>
 <script>
 function checkchange() {
  if(document.getElementById('favouritecolour').value === 'OTHERS') {
    document.getElementById('other').style.display='block';
}else {
    document.getElementById('other').style.display='none';
            document.getElementById('pets').value = "DOG"; // Reset the value to Dog 
            document.getElementById('besides').style.display='none'; // You need to hid this one two this will fix your issue
        }
    };


    function check() {
        if(document.getElementById('pets').value === 'OTHERS') {
            document.getElementById('besides').style.display='block';
        }else{
            document.getElementById('besides').style.display='none';
        }
    };
    </script>
</head>
<body>

    <select id='favouritecolour' onChange='checkchange()'>
        <option value='BLUE'>BLUE</option>
        <option value='RED'>RED</option>
        <option value='OTHERS'>OTHERS</option>
    </select>
    <div id='other' style="display: none">
        <input type='text' placeholder="FILL IN"><br />
        <select id='pets' onChange='check()'>
            <option value='DOG'>DOG</option>
            <option value='RABBIT'>RABBIT</option>
            <option value='OTHERS'>OTHERS</option>
        </select>
    </div>
    <div id='besides' style="display: none">
        <input type='text' placeholder="FILL IN">
    </div>
    <input type="submit" name="SUBMIT" id="submit"/>
</body>
</html>

First of all, close all html tags! Second, mostly its better to check for "===" instead of "==" in JS (google about why). Third and finnaly, you need to hide the element

</div>

// global variable
var el_other = document.getElementById('other');
var el_favour = document.getElementById('favouritecolour');
var el_pets = document.getElementById('pets');
var el_besides = document.getElementById('besides');

function checkchange() { 
    if (el_favour.value == 'OTHERS') {
        el_other.style.display='block';
    } else {
       
       el_pets.selectedIndex = 0;  // select first option in el_pets (1) 
       check() // call function check()  to re-step (2)
       
       
        el_other.style.display='none';
    }
};


function check() {
    if (el_pets.value == 'OTHERS') {
       el_besides.style.display='block';
    } else {
        el_besides.style.display='none';
    }
};

<html>
<head>
<title></title>
</head>
<body>
<select id='favouritecolour' onChange='checkchange()'>
    <option value='BLUE'>BLUE</option>
    <option value='RED'>RED</option>
    <option value='OTHERS'>OTHERS</option>
</select>
<div id='other' style="display: none">
    <input type='text' placeholder="FILL IN"/><br/>
    <select id='pets' onChange='check()'>
        <option value='DOG'>DOG</option>
        <option value='RABBIT'>RABBIT</option>
        <option value='OTHERS'>OTHERS</option>
</select>
<div id='besides' style="display: none">
    <input type='text' placeholder="FILL IN"/>
    <input type="submit" name="SUBMIT" />
</div>
</body>
</html>

</div>