MaterlizeCSS: Cannot append to Select option

I need to append to tag based on the onchange function. It was appended, but can't able to view while click the dropdown.

$(document).ready(function(){
     $('select').formSelect();
});


a=['16MA401','16ME401','16ME402','16ME403','16ME404','16ME405','16EEG02','16EEG03']
b=['16ME601','16ME602','16ME603','16ME604','16MEE07','16ME605','16ME606','16ME607']
$('#class').on('change', function(){ 
    $('#sub').html('');
    c=document.getElementById('class').value;
    console.log(c)
    if (c=='2a' || c=='2b') {
        for (var i = 0; i < a.length; i++) {
          $('#sub').append('<option value='+a[i]+'>'+a[i]+'</option>');}
        }
    else{
        for (var i = 0; i < a.length; i++) {
          $('#sub').append('<option value='+b[i]+'>'+b[i]+'</option>');}
        }
    }
  );

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"> </script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.js"></script>
</head>
<body>
    <form action="" method="POST">
        <div class="row ">
            <div class="input-field col s6">
                Class 
                <select required id="class" name="clas">
                <option selected disabled>Select class</option>
                <option value="2a">2a</option>
                <option value="2b">2b</option>
                <option value="3a">3a</option>
                <option value="3b">3b</option>
                </select>
            </div>
            <div class="input-field col s6">
                Subject
                <select required id="sub" name="sub">
                <option selected disabled>Select class</option>
                </select>
            </div>
            <div class="input-field col s2 offset-s5">
                <input type="submit" class="btn" name="btn" value="Submit">
            </div>
        </div>
    </form>
</body>

After select some options in the first dropdown, the second dropdown innerhtml was changing based on the first option.

In console, i get this:

$(sub).html();

'<option value=\"16ME601\">16ME601</option><option value=\"16ME602\">16ME602</option><option value=\"16ME603\">16ME603</option><option value=\"16ME604\">16ME604</option><option value=\"16MEE07\">16MEE07</option><option value=\"16ME605\">16ME605</option><option value=\"16ME606\">16ME606</option><option value=\"16ME607\">16ME607</option>'

Solution

Instead of .append() give .formSelect().append() and finally add $('select').formSelect();