I am currently facing an issue with my dropdown menus. I have two dropdowns on my webpage:

First Dropdown:

First Dropdown Code:

<select name="idx" id="masthead_search">                     
    <option value="">Library catalog</option>                           
    <option value="ti">Title</option>                           
    <option value="au">Author</option>                            
    <option value="su">Subject</option>
    <option value="nb">ISBN</option>                                                       
    <option value="se">Series</option>
    <option value="callnum">Call number</option>                                                       
</select>

Second Dropdown:

Second Dropdown Code:

 <select name="branch_group_limit" id="select_library">
     <option value="">All libraries</option>                                       
     <option value="branch:01">Main Library</option>                                            
 </select>

To address a styling issue where the highlight background of the option tag when hovered was not displaying correctly, I used jQuery to convert the select and option tags to ul li tags.

/** Convert a select-option tag to ul-li tag to change its dropdown highlight color from blue to green  **/
$(document).ready(function(){

     /**masthead_search **/
     $('#masthead_search').parent().prepend('<div class="btn-group btn-input clearfix">   <button type="button" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown"><span data-bind="label">Library catalog</span> <span class="caret"></span></button><ul id="newmasthead_search" name="masthead_search" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">');

     $('#masthead_search option').each(function(){
     $('#newmasthead_search').append('<li value="' + $(this).val() + '" role ="presentation"><a tabindex="-1" role="menuitem">'+$(this).text()+'</a></li>');
});
     $('#newmasthead_search').append('</ul></div>');
     $('#masthead_search').remove();
     $('#newmasthead_search').attr('id', 'masthead_search');

     /**select_library **/
     $('#select_library').parent().prepend('<div class="btn-group btn-input clearfix"><button type="button" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown"><span data-bind="label">All libraries</span> <span class="caret"></span></button><ul id="newselect_library" name="branch_group_limit" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">');
     $('#select_library option').each(function(){
     $('#newselect_library').append('<li value="' + $(this).val() + '" role ="presentation"><a tabindex="-1" role="menuitem">'+$(this).text()+'</a></li>');
});
     $('#newselect_library').append('</ul></div>');
     $('#select_library').remove();
     $('#newselect_library').attr('id','select_library');
});

$( document.body ).on( 'click', '.dropdown-menu li', function( event ) {

    var $target = $( event.currentTarget ); 
    $target.closest( '.btn-group' )
    .find( '[data-bind="label"]' ).text( $target.text() )
    .end()
    .children( '.dropdown-toggle' ).dropdown( 'toggle' );

    return false; 
});

After implementing the code, the appearance of the dropdowns has been altered as follows:

First Dropdown:

First Dropdown Code:

<div class="btn-group btn-input clearfix">
        <button type="button" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown">
            <span data-bind="label">Library catalog</span> 
            <span class="caret"></span>
        </button>

        <ul id="masthead_search" name="masthead_search" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li value="" role="presentation"><a tabindex="-1" role="menuitem">Library catalog</a></li>
            <li value="ti" role="presentation"><a tabindex="-1" role="menuitem">Title</a></li>
            <li value="au" role="presentation"><a tabindex="-1" role="menuitem">Author</a></li>
            <li value="su" role="presentation"><a tabindex="-1" role="menuitem">Subject</a></li>
            <li value="nb" role="presentation"><a tabindex="-1" role="menuitem">ISBN</a></li>
            <li value="se" role="presentation"><a tabindex="-1" role="menuitem">Series</a></li>
            <li value="callnum" role="presentation"><a tabindex="-1" role="menuitem">Call number</a></li>
        </ul>
</div>

Second Dropdown:

Second Dropdown Code:

<div class="btn-group btn-input clearfix open">
    <button type="button" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown">
       <span data-bind="label">All libraries</span> 
       <span class="caret"></span>
    </button>
    <ul id="select_library" name="branch_group_limit" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
        <li value="" role="presentation"><a tabindex="-1" role="menuitem">All libraries</a></li>
        <li value="branch:01" role="presentation"><a tabindex="-1" role="menuitem">Main Library</a></li>
    </ul>
</div>

However, I encountered a problem when resizing my browser window and interacting with the dropdowns. The first dropdown does not display properly upon clicking, and instead, the second dropdown content is shown in place of the first dropdown.

First Dropdown:

Second Dropdown:

I would appreciate any assistance in identifying where I may have gone wrong in this implementation. Thank you for your help.