How to display Multi select Listbox as dropdown in ASP.NET web forms

Question

I have the below code implemented, but the desired output is not rendered. The list boxes are used to filter the grid view. I can filter the grid view but the filters (list boxes) are being rendered as it is. I need them to be inside the dropdown. I have included the links to relevant resources in the head section, yet the control is rendered as a list box. I have seen this code work for many tutorials, why is it not working for me? Any help is appreciated

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    
    <link href="StyleSheet.css" rel="stylesheet" type="text/css">

    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
    <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
    <script src = "/scripts/jquery.min.js"></script>
    <script src = "/bootstrap/js/bootstrap.min.js"></script>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
    <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("[id$=TextBox_From]").datepicker(
                {
                    dateFormat: 'mm/dd/yy', autoclose: true
                }
            );
            $("[id$=TextBox_To]").datepicker(
                {
                    dateFormat: 'mm/dd/yy', autoclose: true
                }
            );

            var FromDate = new Date(Session["start_date"]);

            $("[id$=TextBox_From]").datepicker('setDate', FromDate);
            var ToDate = new Date(Session["end_date"]);
            $("[id$=TextBox_To]").datepicker('setDate', ToDate);

            $("[id$=lstrpa_ticket_id]").multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
            $("[id$=lstPortal_ID]").multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
            $("[id$=lstRegion]").multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
            $("[id$=lstMarket]").multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
            $("[id$=lstClient]").multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
            $('#lstAgency').multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
            $("[id$=lstrequest_type]").multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
            $("[id$=lstts_type]").multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
            $("[id$=lstcompleted_success]").multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
            $("[id$=lsttime_taken_validation]").multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
            $("[id$=lsttime_taken_preQA]").multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
            $('[id*=lst1]').multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
        });

    </script>

In the above code for some places I tried different ways to identify list box control in different ways for checking, yet both failed:

$("[id$=lstPortal_ID]").multiselect

$('#lstAgency').multiselect

The control is rendered as :

The desired output is like this