I have used multiple CollapsiblePanelExtender, dropdown list I have placed

In 1st CollapsiblePanelExtender when you click on submit button 2nd CollapsiblePanelExtender open that time Select2 class is loosing that time again so I have to page load to get that effect for auto complete.

<script src="ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="assets/select/js/select2.js"></script>     
<link rel="stylesheet" href='assets/select/css/select2.css' type='text/css' />  
$(document).ready(function () {
    $(".ddwhDesc").select2({
        placeholder: "Select an option",
        allowClear: true
    });
});
			
<asp:UpdatePanel runat="server" ID="pnlpodetails">
    <ContentTemplate>								
        <asp:Panel ID="pnl1" runat="server" CssClass="cpBody">
        <asp:DropDownList ID="ddl1" Width="300px" runat="server" CssClass="form-control ddwhDesc" ToolTip="Select ">
            <asp:ListItem Text="Alice Mutton" Value="Alice Mutton"></asp:ListItem>
            <asp:ListItem Text="Aniseed Syrup" Value="Aniseed Syrup"></asp:ListItem>
            <asp:ListItem Text="Boston Crab Meat" Value="Boston Crab Meat"></asp:ListItem>
            <asp:ListItem Text="Camembert Pierrot" Value="Camembert Pierrot"></asp:ListItem>
            <asp:ListItem Text="Carnarvon Tigers" Value="Carnarvon Tigers"></asp:ListItem>
            <asp:ListItem Text="Chai" Value="Chai"></asp:ListItem>
            <asp:ListItem Text="Chang" Value="Chang"></asp:ListItem>
            <asp:ListItem Text="Chartreuse verte" Value="Chartreuse verte"></asp:ListItem>
        </asp:DropDownList>
        </asp:Panel>
        <ajax:CollapsiblePanelExtender ID="CPXOrderDetails" runat="server" TargetControlID="pnl1" CollapseControlID="pnl1header" ExpandControlID="pnl1header" CollapsedImage="assets/plus.png" ImageControlID="img1" ExpandedImage="assets/minus.png" CollapsedSize="0"></ajax:CollapsiblePanelExtender>										
    </ContentTemplate>                                
</asp:UpdatePanel>