I have a select field for frequency , which then controls a secondary set of fields - based on the value of the first:

1. If the weekly frequency option is selected, the user gets a material select drop down to the select the day of week (Sun-Sat)
2. If the monthly frequency option is selected, the user gets a material select drop down to the select the day in the month (1-30)
3. If once in 3 months, once in 6 months, or once a year frequency options are selected - the datepicker field should appear.

The problem is that when the weekly/month options, the initial/primary frequency select just disappears!

The 2nd issue is that i cant get the datepicker to trigger. I tried using a snippet sent by one of the tech supporters, from here, but it didnt seem to work.

Here is my snippet: https://mdbootstrap.com/snippets/jquery/moshe/2520950?view=standard

And here is my JS code:

$(document).ready(function() {
 $("#frequencyType").materialSelect();


    $("#frequencyType").change(function(){
        var frequencyType = $("#frequencyType option:selected").val();
        alert(frequencyType);

        if (frequencyType=='w') {
            $("#frequencyAmount_m").hide().materialSelect({destroy: true});
            $("#frequencyDateHolder").hide();
            $("#frequencyAmount_w").show().addClass("mdb-select").materialSelect();    //.show().addClass("required");

        } else if (frequencyType =='m') {
            $("#frequencyAmount_w").hide().materialSelect({destroy: true});
            $("#frequencyDateHolder").hide();
            $("#frequencyAmount_m").show().addClass("mdb-select").materialSelect();    //.show().addClass("required");

        } else if (frequencyType =='y') {
            $("#frequencyAmount_w, #frequencyAmount_m").hide().materialSelect({destroy: true});
            $("#frequencyDateHolder").show();
            $("#frequencyDate").datepicker();
            $('#frequencyDate').on('click', () => {
                $('i').trigger('click')
            });

            $("#frequencyDate").addClass("required");

        } else if ( (frequencyType =='z')|| (frequencyType =='x')) {
            $("#frequencyAmount_w, #frequencyAmount_m").hide().materialSelect({destroy: true});
            $("#frequencyDateHolder").show();
            $("#frequencyDate").datepicker();
            $('#frequencyDate').on('click', () => {
                $('i').trigger('click')
            });

            $("#frequencyDate").attr('placeholder','Starting from date').addClass("required");
        }



    });



});