Add toogle search form - navwalker - Wordpress

Question

I want to add in my nav a loop icon (font awesome) and if i clck , the search input form display (toggle effect).

In function.php, i add this code :

function add_search_form($items, $args) {
if( $args->theme_location == 'header-menu' )
$items .= '<li class="search menu-item menu-item-type-custom dropdown menu-item-object-custom"><a class="search_icon"><i class="fa fa-search"></i></a><div style="display:none;" class="searchform">'. get_search_form(false) .'</div></li>';
return $items;
}

jQuery(document).ready(function ($) {
    $(".search_icon").click(function () {
        $(".searchform").slideToggle();
    });

    $(document).keydown(function (e) {
        if (e.keyCode == 27) {
            //$(modal_or_menu_element).closeElement();
            $(".searchform").hide();
        }
    });
});

.searchform {
    display: block;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 1px;
    margin-right: 3rem;
    z-index: 9999;
    background: #fff;
    padding: 20px;
    background: #343a40;
    margin-top: -1px;
}
.container { position:relative;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<li class="search menu-item menu-item-type-custom dropdown menu-item-object-custom">
<a class="search_icon">
<i class="fa fa-search" aria-hidden="true"></i>
</a>
<div style="display:none;" class="searchform">
<!-- search -->
<form class="search" method="get" action="example.com" role="search">
        <input class="search-input" type="search" name="s" placeholder="Que cherchez-vous ?">
        <button class="search-submit" type="submit" role="button">Ok !</button>
    </form>
<!-- /search -->
    </div>
</li>

I use navwalker. Before i don't use navwalker and this code works, but now, no action when i click on the icon.

Any idea ?

Thank you