无法使用jquery

Question

我必须在从数据库发送的每一行之后生成一些文本框，所以我有这个用户有2行：

当然每行都属于id：

                      <td><?php echo $counter--; ?></td>
                      <td><?php echo $installment['date_now'] ?></td>
                      <td><?php echo $installment['payment'] ?> $</td></tr>

                  </tr>
                  <?php } ?>
                  <tr><th colspan="10" style="text-align: right;">Remaining:</th>
                    <th><?php echo  ($cash['project_cost'] - $sum) ?> $</th>
                  </tr>
                  <tr id="<?php echo $cash['infoid']; ?>"><td colspan="8" style="text-align: right;">Add Payment</td>
                    <td><input type="date" class="form-control" id="date_pay_now[]"/></td>
                    <td><input class="form-control" type="text" id="pay_now"/></td>
                    <td><button id="add_payment" class="btn btn-success glyphicon glyphicon-plus"></button>
                  </tr>
                  <tr><td></td></tr><tr><td></td></tr>
                <?php $sumCash = $sumCash + $cash['project_cost']; } ?>
                <tr>
                  <th colspan="10">Cash Total</th><th id="final_cash"><?php echo $sumCash ?> $</th>
                </tr>
              </table>
            </div>
              <?php } else { ?>
              No Payments available
            <?php } ?>

现在，当选择日期并输入金额时，我应该将这些值发送到AJAX，但首先我需要获取该行的id，以便我也可以发送它。

$("#add_payment").click(function()
{
  var date_of_pay = $("#date_pay_now").val();
  var pay_now = $("#pay_now").val();
  var id_pay = $(this).closest('tr').attr('id');
  console.log(id_pay);
  if(date_of_pay == "" || pay_now == "")
  {
    $("#date_pay_now").css('border-color', 'red');
    $("#pay_now").css('border-color', 'red');
  }
  if(date_of_pay != "" && pay_now != "")
  {
    $.ajax
    ({
      //Still not typed
    });
  }
});

如果你看到图像，当我点击第一个按钮时，我在控制台上看到了正确的ID，如果它们是空的，我可以看到红色，但是当我刷新页面并直接点击第二行时按钮，由于显示空文本框，我在控制台上看不到任何值，也没有css颜色。

在这里，当我点击下一个按钮时，控制台上没有颜色也没有ID：