Hello,

Tyring to rebuild mdb-select dropdown with AJAX. I can build the options but I cannot get original the styling. I am loosing mdb-select styling. Her is my code where I build incoming new data:

    <link href="{% static './css/bootstrap.min.css' %}" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="{% static './css/extra/mdb.min.css' %}" rel="stylesheet">

<div class="col-12 col-md-5">
    <select class="mdb-select md-outline md-form" searchable="Search here..">
    {% for i in states %}
    <option value="{{ i }}">{{ i }}</option>
    {% endfor %}
    </select>
</div>

<!-- JQuery -->
<script type="text/javascript" src="{% static './js/jquery.min.js' %}"></script>

<!-- MDB core JavaScript -->
<script type="text/javascript" src="{% static './js/mdb.min.js' %}"></script>
<script>
    $(document).ready(function () {
    $('.mdb-select').materialSelect();
    $('.select-wrapper.md-form.md-outline input.select-dropdown').bind('focus blur', function () {
    $(this).closest('.select-outline').find('label').toggleClass('active');
    $(this).closest('.select-outline').find('.caret').toggleClass('active');
    });
    });
</script>

and this is the ajax side where I need to re-build the dropdown

    },
    success: function (data) { 
        $('#id_state_b_ajax').html(data);
    },
    error: function (data) {
            //(response["responseJSON"]["error"]);
        }

What I get is unstyled dropdown. What is the best way to build mdb-select dropdowns with all styling and features ?

Thank you