Multi select styling still not same as examples

Hi guys i have the multi select in my code and the style with the tick box next selections still doesnt show.

<form action="{{ path_for('admin.team.member') }}" method="post">

    <div class="md-form">
        <select name="members[]" id="multiSelect" class="mdb-select colorful-select dropdown-primary" searchable="Search here.." multiple="multiple">
            <option value="" disabled selected>Choose your members</option>

            {% for member in members %}
                <option value="{{ member.id }}">{{ member.user.userFullname() }} {{ member.user.last_name | capitalize }}</option>
            {% endfor %}

        </select>
        <label>Members</label>
    </div>

    {{ csrf.field | raw }}

    <input type="hidden" name="team_id" value="{{ team.id }}">

    <div class="text-center">
        <button type="submit" class="btn mdb-color btn-md">Add Members</button>
    </div>

</form>

<script>

src="https://code.jquery.com/jquery-3.3.1.min.js"

integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="

crossorigin="anonymous">

</script>

<!-- Bootstrap tooltips -->

<script type="text/javascript" src="http://localhost:9999/js/popper.min.js"></script>

<!-- Bootstrap core JavaScript -->

<script type="text/javascript" src="http://localhost:9999/js/bootstrap.min.js"></script>

<!-- MDB core JavaScript -->

<script type="text/javascript" src="http://localhost:9999/js/mdb.min.js"></script>

<script type="text/javascript" src="http://localhost:9999/js/extra.js"></script>

<!--Add any extra javascript-->

<script>

$('document').ready(function () {

$('.mdb-select').material_select();

});

</script>

I have all the code stated in the examples but I dont get the same style as you guys. Please advise?