Javascript 如何为JQuery中的每一行动态更新模式中的文本

因此，我有一个每个用户的预约表，每一行都有一个名为“操作”的按钮。单击此按钮时，会弹出一个模式，其中包含特定行/预订的一系列操作，即完成预订或取消等。在该模式中，每个操作都有选项卡。其中一个操作是“调整付款”，用户可以调整客户为其约会支付的最终金额

但是，他们输入的新金额必须高于当前金额。以下是我目前掌握的情况：

模式：

<div id="myTabContent" class="tab-content" style="font-weight: 200; font-family: MontserratExtraLight;" >   
<div class="tab-pane fade active in" id="adjustPayment<?php echo $i; ?>">
<?php

    <h2 style="float: left;" class="modal-title text-color">Adjust Payment</h2>
    <br><br>
    <p style="float: left;font-size: 15px;">Adjust Patients Final Payment</p>
    <input type="hidden" name="id" value="<?php echo $bookings[$i]['id']; ?>"/>
    <input type="hidden"  name="customer_id" value="<?php echo $bookings[$i]['customer_id']; ?>"/>
    <input type="hidden"  name="booking_id" value="<?php echo $bookings[$i]['booking_id']; ?>"/>
    <input hidden type="hidden" name="date_time_from" value='<?php echo $bookings[$i]['date_time_from']; ?>' />


    <br><br>
    <p style="float: left;font-size: 15px;">You can adjust the final amount the customer has to pay below. </p>
    <br>
    <p style="text-align: center;font-size: 15px;"> Please Enter a New Payable Amount (inc. Add-ons): </p> <br>
    <div class="col-md-12">
        <div class="form-group div-style">
            <small class="help">
                <span style="display:none;" id="message_c" class="message" role="alert">The new payable amount must be higher than the previous payable amount.</span> </small>
                <span style="font-size:20px; font-weight:bold;">   <?php echo CURRENCY_SYMBOL."&nbsp;" ?>  </span>
                <input type="text" class="input form-control main-color input-lg new_payable_amount" id="new_payable_amount" style="background: #f4f4f4; width:30%; float:center; display: inline-block; font-weight:bold;" onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))" name="new_payable_amount"><br>

        </div>
    </div>


   <br><br>
     <p style="float:left;font-size: 15px;"><strong>Note:</strong> You can only enter an amount higher than the current amount payable by the patient which is:</p>
     <p id="old_payable_amount" class="old_payable_amount" style="text-align: center; font-size: 26px; font-weight: bold; "><?php echo CURRENCY_SYMBOL."&nbsp;". number_format($bookings[$i]['payment'] / 100, 2); ?> </p>

     <input type="button" id="adjustAmount" class="button btn-black btn-system btn button-lg adjustAmount" style="margin-top: 10px; border-radius:0px; width: 30%; margin-bottom: 0%;" value="Adjust">
               <?php //} ?>

             </div>

注意：您只能输入高于患者当前应付金额的金额，即：

JQuery：

$('.new_payable_amount').on('keyup', function() {
    //  var new_payable = document.getElementById('new_payable_amount').value;
    var new_payable = $(".new_payable_amount").val();
    //var old_payable = document.getElementById('old_payable_amount').innerHTML;
    var old_payable = $(".old_payable_amount").html();

    old_payable = old_payable.replace(/[^\d\.]/g, '');

    if(new_payable <= old_payable){
        //  document.getElementById('message_c').innerHTML="The new payable amount must be higher than the previous payable amount." +old_payable +" " +new_payable;
        $(".message").html("The new payable amount must be higher than the previous payable amount." +old_payable +" " +new_payable);
        //  document.getElementById('message_c').style.display = 'block';
        $(".message").css("display", "block");
        $("#adjustAmount").attr("disabled", true);

    }else {
        //  document.getElementById('message_c').innerHTML= "";
        $(".message").html("Pass ");
        //document.getElementById('message_c').style.display = 'block';
        $(".message").css("display", "block");

        $("#adjustAmount").attr("disabled", false);
    }
  });

$（'.new\u paid\u amount'）。在（'keyup'，function（）上{
//var新应付金额=document.getElementById（“新应付金额”）。值；
var新应付金额=$（“.new应付金额”）.val（）；
//var old_payment=document.getElementById（'old_payment_amount'）.innerHTML；
var old_payment=$（“.old_payment_amount”）.html（）；
应付旧款=应付旧款。替换（/[^\d\.]/g，”）；
如果（新的应付款）
您可以使用
$（this）
从您键入的
中获取值，而不是
$（'.new\u payment\u amount'）
-这将是集合…因此您可以使用此类更改每个元素的值

使用
$（this.val（）
和
$（this.html（）
更新和获取数据


如果输入的类型为
number
，则可以使用
min
和
max
属性，而无需使用js


已更新

你的“额外询问”。你需要以某种方式将语气联系起来
在你的代码中我可以看到

<input type="hidden" name="id" value="<?php echo $bookings[$i]['id']; ?>"/>

然后你可以在知道id的情况下更新它

var update_id = $(this).parent().parent().parent().parent().find("input[name='id']");
$("updated_amount_"+update_id).html(new_payable);

这可能是更好的方式，但这正是我快速思考的

还有一个问题是模态对话框是如何附加的。它是从一开始就以html格式呈现的，还是每次都由js附加。
这可以为每一行输入一个新值，但是，在大多数情况下，每一行的旧应付金额是不同的并且没有拉取正确的值，而是拉入第一行的值。同样，对于第二部分，模式是html，在单击adjustAmount按钮时被调用并打开。我要传递给弹出模式的数据是$I变量，作为确认对话框，以便我能够存储例如booking[$i]['id']等值。首先，我在html中没有看到任何
旧的\u paid\u amount
类。无论如何，您应该使用
.parents（）
或
next（）从
$（this）
中找到该类
或jquery提供的任何其他函数。如果您使用jquery函数，建议您了解有关它的更多信息：）。关于上一个案例，我将更新答案哦，对不起，我已更新代码以添加它，我一定错过了它out@Hydra你是自己想出来的吗？
var update_id = $(this).parent().parent().parent().parent().find("input[name='id']");
$("updated_amount_"+update_id).html(new_payable);