Javascript FadeToogle Jquery不工作下一步的选择器

我在我的内容中隐藏了一个div，并制作了一个按钮来显示它，但问题是我有很多元素使用这个名称，所以我使用这个函数来解决：

$("a.all_com").click(function(){
    $(this).nextAll("div:first").slideToggle();
});

此功能不起作用，我尝试使用以下方法：

$("a.all_com").click(function(){
    $(this).next("div").slideToggle();
});

及

没有人和我一起工作请有人解决，这其实是在元素中应用一些

我要显示/隐藏的代码如下：

<div id="task_footer">
    <a href="#" id="comment_buttom" class="new_com">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Comentar</a>
    <a href="#" id="comment_buttom" class="all_com">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Comentários</a>
</div>

<div id="comment_list" style="display:none;" >
    <% tasks.comments.each do |c| %>
        <% if c.user %>
            <p class="one_comment">
            <strong><%= c.user.email %></strong>
            <%= c.comment %>
            </p>
        <% end %>
    <% end %>
</div>

不能有多个元素具有相同的

id

，

id

s应该是唯一的。对于每个任务，我应该创建一个#注释#列表。注释#列表？这会起作用吗？您至少应该将其中一个

#comment_butom

更改为其他内容，可能使用类

comment_butom

。页面上的所有其他元素也是如此。不过，我不知道这是否能帮你解决问题。你有什么建议吗？

<div id="task_footer">
    <a href="#" id="comment_buttom" class="new_com">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Comentar</a>
    <a href="#" id="comment_buttom" class="all_com">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Comentários</a>
</div>

<div id="comment_list" style="display:none;" >
    <% tasks.comments.each do |c| %>
        <% if c.user %>
            <p class="one_comment">
            <strong><%= c.user.email %></strong>
            <%= c.comment %>
            </p>
        <% end %>
    <% end %>
</div>