Javascript JS/JQUERY-单击每个产品购买按钮时显示模式

我有一个while语句显示我的所有产品，如：。我有一段javascript/jquery代码，单击它时，会显示如下模式：。我遇到的问题是，只有当我单击左侧第一个产品上的Paypal按钮时，模式才会显示。当我单击右侧

Keyvault

产品上的Paypal按钮时，它不会显示模式事件，尽管它是一个while循环，因此它应该使用相同的名称

我的模态：

---

非常基本的错误。您需要使用类名而不是id。当浏览器更改id时，如果您有许多项通过循环呈现相同id，则会更改id

这就是我们要做的工作

为paypal按钮指定一个类名，例如

<button class="modalopenerbutton"

---

哦，我从来不知道这个事实。感谢分享并解决我的问题：）

<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="POST" target="_blank">


    <input type="hidden" name="cmd" value="_xclick">
    <input type="hidden" name="business" value="<?php
echo $site_config->grabSiteSettings_manual($con, 'paypal_address');
?>">
    <input type="hidden" name="item_name" value="<?php
echo $name;
?>">
    <input type="hidden" name="item_number" value="<?php
echo $id;
?>">
    <input type="hidden" name="amount" value="<?php
echo $price;
?>">
    <input type="hidden" name="quantity" value="1">
    <input type="hidden" name="currency_code" value="USD">
    <input type="hidden" name="custom" value="username=<?php
echo $username;
?>&product=<?php
echo $name;
?>">
    <input type="hidden" name="notify_url" value="<?php
echo $site_callback;
?>">
    <input type="hidden" name="cancel_return" value="<?php
echo $site_return_canceled;
?>">

    <button type="submit" class="btn btn-danger" id="paypal_submit" aria-hidden="true" data-backdrop="static" data-keyboard="false" style="vertical-align : bottom; margin-bottom: 15px; display: block; width: 40%; float:left; margin-left: 9%;">
        <i class="fa fa-paypal"></i>aypal
    </button>
    <button type="submit" class="btn btn-danger" disabled="true" style="vertical-align : bottom; margin-bottom: 15px; display: block; width: 40%; float: right; margin-right: 9%;">
        <i class="fa fa-btc"></i>itcoin
    </button>
</form>

        $(document).ready(function() {
        $('#Loading_purchase_status').modal('hide');

        $('#paypal_submit').click(function () {
            $('#Loading_purchase_status').removeData('bs.modal').modal({backdrop: 'static', keyboard: false}); 
            $('#Loading_purchase_status').modal('show');
        });
    });

<button class="modalopenerbutton"

$(document).ready(function() {
        $('#Loading_purchase_status').modal('hide');

        $('.modalopenerbutton').click(function () {
            $('#Loading_purchase_status').removeData('bs.modal').modal({backdrop: 'static', keyboard: false}); 
            $('#Loading_purchase_status').modal('show');
        });
    });