编辑仅在首页上有效，模态可能会出错吗？

Question

我有一个页面，显示产品详细信息。当我单击任何产品时，我们都可以对其进行编辑，但是问题是当我转到产品的下一页时，它不起作用或无法显示首页上最后点击的产品（除第一页外，Javascript无效）

这是Product.blade的主要部分----

        <div class="modal fade" id="changeAlertQuantity" tabindex="-1" role="dialog">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                Change Alert Quantity & Unit Price
              </div>
              <div class="modal-body">
                <form class="form-horizontal" role="form" method="POST" action="{{ url('changeAlertQuanityAndUnitPrice') }}">
                  {{ csrf_field() }}
                  <div class="form-group">
                    <label for="name" class="col-md-4 control-label">Product ID</label>
                    <div class="col-md-6">
                      <input id="name" type="text" class="form-control" name="product_name" readonly="">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="alert_quantity" class="col-md-4 control-label">Alert Quantity</label>
                    <div class="col-md-6">
                      <input id="alert_quantity" type="text" class="form-control" name="alert_quantity" required="">
                    </div>
                  </div>

                 <div class="form-group">
                    <div class="col-md-8 col-md-offset-4">
                      <button type="submit" class="btn btn-primary">
                        Submit
                      </button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>

------- Javascript --------

    $(document).ready(function(){
      $('#product-list-table').DataTable({
        "order": [[ 0, "desc" ]],
        "lengthMenu": [ [10, 25, 50, 100, -1], [10, 25, 50, 100, "All"] ]
      });


      $(".tableData").click(function(){
        var name = $(this).children('td:first').html();
        var alert_quantity = $(this).closest('tr').children('td.alertQ').html();

        $("#name").val(name);
        $("#alert_quantity").val(alert_quantity);
      });

第一页，我们可以正确进行编辑：

在第二页上单击时，它显示第一页产品，并且不编辑第一页上没有的任何内容

我也尝试扩展首页产品列表，但是它仍然只显示前十个产品的编辑选项。