我的列表过滤器没有隐藏所有内容

Question

再次，我有一个小问题，关于我有一个小问题。我有一个网站，您可以在其中创建食谱，所有创建的食谱都显示在一个站点上。当然，您想按配方名称过滤此列表，因此我构建了一个小的搜索框，但此框确实可以100％完美地工作。 当我想过滤第一个元素时，一切正常，但是当我想过滤一些较低层的配方时，过滤功能本身起作用，但是在搜索框旁边，仍然有一个订阅按钮，它属于一个隐藏的食谱。

这是三张图片，希望可以更直观地描述我的问题：

---

---

第一个代码是jquery，第二个代码是我的带有列表的html（.ejs）

$(document).ready(function(){
        $("#myInput").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $("#myList #recipe_name").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });
    });

---

<input id="myInput" type="text" placeholder="Search..">
    <% for(var i=0; i < recipe.length; i++) {  %>

    <div id="myList">
        <div id="recipe_name"><%=recipe[i].titel%></div>
        <div id="subscribe_button"><button type="submit" class="button_subscribe" value="<%=recipe[i]._id%> <%=recipe[i].titel%> <%=recipe[i].ingredients%>  <%=recipe[i].discreption%> <%=recipe[i].theme%> <%=recipe[i].difficulty%>"  id="button_small" onclick="this.innerHTML='Subscribed'">Subscribe</button></div>
    </div>
            <% } %>