Changing selecting options based on multiple other select options

Question

This is the code I have so far https://jsfiddle.net/7vz59c0e/ , it does not work as I cant get the printed html(from javascript) to react to other javascript.

What I would like is option 2 to affect which options show up in options 3 and only to show when option 1 is selected.

$(document).ready(function () {
    $("#options").change(function () {
        var val = $(this).val();
        if (val == "1") {
            $("#options2").html("<label for='options2'>Options2:</label><select id='options2' name='options2' required><option value=''></option><option value='4'>Option 1</option><option value='5'>Option 2</option><option value='6'>Option 3</option></select><br><label for='options3'>Options3:</label><select id='options3' name='options3' required></select>");
        } else if (val == "2") {
            $("#options2").html("<label for='options2'>Options2:</label><select id='options2' name='options2' required><option value=''></option><option value='7'>Option 1</option><option value='8'>Option 2</option><option value='9'>Option 3</option></select><br><label for='options3'>Options3:</label><select id='options3' name='options3' required></select>");
        } else if (val == "3") {
            $("#options2").html("<label for='options2'>Options2:</label><select id='options2' name='options2' required><option value=''></option><option value='10'>Option 1</option><option value='11'>Option 2</option><option value='12'>Option 3</option></select><br><label for='options3'>Options3:</label><select id='options3' name='options3' required></select>");
        }
    });
});
$(document).ready(function () {
    $("#options2").change(function () {
        var val = $(this).val();
        if (val == "4") {
            $("#option3").html("<option value=''></option><option value='13'>Option 1</option><option value='14'>Option 2</option><option value='15'>Option 3</option>");
        } else if (val == "5") {
            $("#option3").html("<option value=''></option><option value='16'>Option 1</option><option value='17'>Option 2</option><option value='18'>Option 3</option>");
        } else if (val == "6") {
            $("#option3").html("<option value=''></option><option value='19'>Option 1</option><option value='20'>Option 2</option><option value='21'>Option 3</option>");
        } 
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="options">Options:</label>
<select id="options" name="options" required>
<option value=""></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<div id="options2">
</div>