Javascript 编辑只在第一页上工作，模态可能有问题吗？

我有一个页面显示产品的详细信息。当我点击任何产品时，我们可以对其进行编辑，但问题是当我转到产品的下一页时，它不工作或显示第一页最后一次点击的产品（除了第一页，Javascript不工作）

这是主要产品。叶片零件----

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

在第二页中，单击后，它将显示第一页的产品，并且不会编辑第一页以外的任何内容

---

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

您可以在codepen中发布当前的HTML和脚本，为了更好地了解正在发生的事情，您可以在codepen中发布当前的HTML和脚本，以便更好地了解正在发生的事情

        <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>

    $(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);
      });