Bootstrap Multiselect showing "None selected"

Question

I am using this plugin inside a bootstrap modal. I am binding the data from server. when opening the modal once the page loads for the very first time, multiselect showing all options selected with title "All Selected (4)". But when closing the modal and opening again, the title changes to "None Selected" however all the options are selected.

Below is the function which I am calling when clicking on a button.

function OpenProductTestingModal() {
        BindInterfaceOnProductTestingModal();
        $('#modalProductTestingInputs').modal('show');
    }

function BindInterfaceOnProductTestingModal() {
        
        var url = '@Url.Action("GetInterfacesForProductTesting", "EngineeringInputs")';

        $.ajax({
            type: "GET",
            url: url,
            async: false,
            success: function (res) {
                var result = res.Records;
                $.each(result, function (i, item) {
                    $("#ddlInterface").append("<option value='" + item.OptionID + "'>" + item.OptionName + "</option>");
                });

                $("#ddlInterface").multiselect('selectAll', false);
                $("#ddlInterface").multiselect('updateButtonText');
            },
            error: function (err) {
                console.log(err);
            }
        });
    }

Any quick help would me much appreciated as I am trying to fix it since last 2 days.