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

Question

I have a while statement showing all of my products, like such : https://gyazo.com/68f2ae0dd80e21b6a5f0a7deeb49877f . I have a javascript / jquery piece of code that when clicked, shows a modal like so : https://gyazo.com/e9b4cf948ec228f221d2526244c2f7bc . The problem I'm having is that the modal only shows when I click the Paypal button on the left, first product. When I click the Paypal button on the right Keyvault product, it does not show the modal eventhough it's a while loop so it should use the same name.

My Modal :

    <div class="modal fade" id="Loading_purchase_status" style="display: none;">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">Payment Status (Don't close this during a payment) <div style="float: right;"><img src="<?php echo $site_config->grabSiteSettings($con, 'site_url').'/pizza/styles/img/loading.gif'; ?>" style="width: 20px; height: 20px;"></div></h4> 
          </div>
          <div class="modal-body">
            <p>Payment Status: <div id="awaiting_payment_status">Awaiting Payment on the Paypal payment page...</div></p>
          </div>
          <div class="modal-footer">
            <a class="btn btn-primary" href="<?php echo $site_config->grabSiteSettings($con, 'site_url').'/pizza/myFiles.php'; ?>">My Files</a>
            <a class="btn btn-danger" data-dismiss="modal">Cancel</a>
          </div>
        </div>
      </div>
    </div>

My Paypal button form :

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

My Javascript / Jquery :

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

Answer 1

very basic mistake. U need to use class name instead of id. as browser changes the id if you have many items with same id rendered through loop.

so here is the work around

assigne a class name to paypal button e.g.

<button class="modalopenerbutton"

and then write the script as follows

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