在包含多个元素的选择器上执行 jQuery.click

Question

我有 2 个相同的按钮，id 为 "data-side-remove":
我还有以下 jQuery 函数

    $('#data-side-remove').click(function(){
      $(this).closest('.line-item-info').slideUp("slow");
      window.location.href = $(this).attr("data-href-remove");
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button
        id="data-side-remove"
        class="plus-box"
        data-href-remove="/cart/change?line={{ forloop.index }}&amp;quantity=0"
        type="button"
        name="button">x</button>

但出于某种原因，代码仅适用于两个按钮中的第一个。然后，由于 slideUp 函数，它消失后，代码也适用于第二个按钮，依此类推。我想这与这样一个事实有关，即一旦它被选中，$('#data-side-remove') 就变成了一个数组，并且该函数只对数组的第一个元素起作用。解决这个问题的最佳方法是什么？

Answer 1

The $(this) will pull the href for the unique plus-box you clicked

    $('.plus-box').click(function(){
      $(this).closest('.line-item-info').slideUp("slow");
      window.location.href = $(this).attr("data-href-remove");
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button
        id="data-side-remove"
        class="plus-box"
        data-href-remove="/cart/change?line={{ forloop.index }}&amp;quantity=0"
        type="button"
        name="button">x</button>