How to integrate multiple choice dependent dropdown into my contact form?

See more:

Javascript

PHP

HTML5

Hello. I'm trying to integrate one code piece with multiple choice dependent dropdown list into my contact form. In any case it is shown as simple list until I take off 'multiple' tag. Anybody knows where is the problem?

It should work like this: http://demo.webslesson.info/muli-select-dynamic-dependent-dropdown-listbox/.

And this what it looks like now: https://ibb.co/VJ78rkS.

Full index.php: https://pastebin.com/fxG0U9XH

What I have tried:

<section class="post-content-area pt-20">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 posts-list">
                <div class="card card-signin my-5">
                    <div class="card-body">
                        <h5 class="card-title text-center" style="font-size: 26px">Test contact form</h5>
                        <form method="post" action="email-script.php" enctype="multipart/form-data" id="emailForm">
                            <select id="first_level" name="first_level[]" multiple class="form-control">
                             <?php
                             foreach($result as $row)
                             {
                              echo '<option value="'.$row["first_level_category_id"].'">'.$row["first_level_category_name"].'</option>';
                             }
                             ?>
                            </select><br>
                            <select id="second_level" name="second_level[]" multiple class="form-control">

                            </select><br>
                            <select id="third_level" name="third_level[]" multiple class="form-control">
                        
                            </select><br>
                            <div class="form-group">
                                <input type="text" name="name" id="name" class="form-control" placeholder="Name" >
                                <div id="nameError" style="color: red;font-size: 14px;display: none">surnameError</div>
                            </div>
                            <div class="form-group">
                                <input type="text" name="phone" id="phone" class="form-control"  placeholder="Phone" >
                                <div id="phoneError" style="color: red;font-size: 14px;display: none">subjectError</div>
                            </div>
                            <div class="form-group">
                                <input type="file" name="attachment" id="attachment" class="form-control">
                                <div id="attachmentError" style="color: red;font-size: 14px;display: none">attachmentError</div>
                            </div>
                            <div class="submit">
                                <center><input type="submit" name="submit" onclick="return validateEmailSendForm();" class="btn btn-success" value="SUBMIT"></center>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>