Редактирование работает только на первой странице, может, что-то не так с модальным?

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

Первая страница и мы можем правильно редактировать:

На второй странице, при нажатии, он показывает продукт первой страницы и не редактирует ничего, что не находится на 1-й странице

Я также пытался развернуть список продуктов на первой странице, но тогда он по-прежнему показывает только возможность редактирования первых десяти продуктов.