javascript onClick 事件找不到循环的 ID php

Question

Please help

This is a php loop code that I created for an online store product, when the "add to cart" button is clicked, a pop up will appear, then there is a buy button in the pop up, the question is when I click buy, the only id that is caught is the product id first

<?php 
    $kata=bersih($_POST['kata']);
    $q=$this->db->query("select * from produk where nama_produk like '%$kata%' and status_produk='Publish'");
    foreach($q->result() as $prow){ ?>
        <div style="background-color: #ffffff; border-radius: 10px; margin-bottom: 30px;">
            <div style="padding: 30px 15px 30px 20px; display: flex; flex-direction: row; align-items: center;">
                <div>
                    <img style="border-radius: 50%; width: 100px; height: 100px;" src="assets/upload/image/thumbs/<?php echo $prow->gambar; ?>" onError="this.onerror=null;this.src='https://pasarangsoduo.com/assets/upload/image/thumbs/<?php echo $prow->gambar; ?>';" class='judul' data-toggle="tooltip" data-placement="top" data-html="true" title="<?php echo $prow->keterangan_diskon; ?><br />Rp. <?php echo uang($prow->harga).'<br />'; ?><?php echo $prow->keterangan; ?>">
                </div>
                <div style="padding-left: 30px;">
                    <div style="display: flex;">
                        <div><?php echo $prow->nama_produk; ?></div>
                    </div>
                    
                    <div style="display: flex; align-items: center;">
                        <?php if($prow->harga==$prow->harga_diskon){ ?>
                        <div style="font-size: 18px; font-weight: bold; padding-right: 10px;">
                             Rp <?php echo uang($prow->harga_diskon); ?>
                        </div>
                        <div style="font-size: 14px; text-decoration: line-through #000000; color: #049b81;">
                        </div>
                        <?php } else { ?>
                        <div style="font-size: 18px; font-weight: bold; padding-right: 10px;">
                             Rp <?php echo uang($prow->harga_diskon); ?>
                        </div>
                        <div style="font-size: 14px; text-decoration: line-through #000000; color: #049b81;">
                             Rp <?php echo uang($prow->harga); ?>
                        </div>
                        <?php } ?>
                    </div>
                    
                    <div id="<?php echo $prow->id_produk; ?>" style="margin-top: 20px; background-color: #e5f7f4; border-radius: 5px; width: 200px; height: 30px; text-align: center; padding-top: 8px;" onclick="openNav()">
                        <div style="color: #049b81; font-weight: bold;">Add to cart</div>
                    </div>
                </div>
                <div style="margin-left: auto;"><i style="color: #ef8d91;" class="fa fa-heart" aria-hidden="true"></i></div>
            </div>
        </div>
        <!-- pop up qty & add to cart -->
        <div id="mySidenav" style="height: 0; width: 100%; border-top-left-radius: 15px; border-top-right-radius: 15px; position: fixed; z-index: 5; bottom: 0; left: 0; overflow-y: hidden; transition: 0.5s; padding-bottom: 0px; background-color: #ffffff;">
          <div style=" padding: 30px; display: flex; justify-content: center;">
            <div style="font-size: 20px; font-wight: bold; margin: 0 auto;" href="#">Tentukan pilihan</div>
            <div><a style="color: #000000; font-size: 20px; font-wight: bold; text-decoration: none;" href="javascript:void(0)" onclick="closeNav()">&times;</a></div>
          </div>
          
          <div style="padding: 0px 30px 0px 30px;">
            Tentukan jumlah
          </div>
          
          <div class="quantity" >
              <div style="display: flex; margin-bottom: 10px; text-align: center; font-weight: bold; padding: 10px 30px 30px 30px;">
                  <span style="height: 20px;width: 20px;color:white;background-color: #39bfa9;border-radius:5px;" class="minus">-</span>
                  <input style="outline: none; border: 0; background-color: transparent; text-align: center; font-weight: bold; font-size: 17px;" size="5" type="number" step="1" min="1" max="<?php echo $prow->max_beli; ?>" id="<?php echo $prow->id_produk; ?>" name="quantity"  value="1" class="home_input_produk qty" disabled>
                  <span style="height: 20px;width: 20px;color:white;background-color: #39bfa9;border-radius:7px;" class="plus">+</span>
              </div>
              
              <div style="text-align: center; padding: 10px 30px 10px 30px;">
                  <div class="add_cart" style="margin: auto; width: 100%; padding: 10px; text-align: center; color:white; background-color: #0f6657; border-radius:5px; font-weight: bold;" data-nama="<?php echo $prow->nama_produk; ?>" data-produkid="<?php echo $prow->id_produk; ?>"  data-produknama="<?php  echo str_replace($krt,'.',$prow->nama_produk).str_replace('/','-',$prow->ukuran); ?>"  data-produkharga="<?php echo $prow->harga_diskon;?>"  data-produkfoto="<?php echo $prow->gambar;?>">Beli</div>
              </div>
          </div>
        </div>
    <?php } ?>

thanks, I need the answer please

Answer 1

this is the js code for pop up

    <script>
function openNav() {
  document.getElementById("mySidenav").style.height = "230px";
  document.getElementById("mySidenav2").style.height = "255px";
  document.getElementById("lataropacity").style.backgroundColor = "rgba(0,0,0,0.5)";
  document.getElementById("lataropacity").style.zIndex = "2";
}

function closeNav() {
  document.getElementById("mySidenav").style.height = "0";
  document.getElementById("mySidenav2").style.height = "0";
  document.getElementById("lataropacity").style.backgroundColor = "";
  document.getElementById("lataropacity").style.zIndex = "";
}
</script>

Answer 2

and this for qty, buy button

<script type="text/javascript">
$(document).ready(function(){
    $('.add_cart').click(function(){
        var produk_id    = $(this).data("produkid");
        var produk_nama  = $(this).data("produknama");
        var nama  = $(this).data("nama");
        var produk_harga = $(this).data("produkharga");
        var produk_foto = $(this).data("produkfoto");
        var quantity     = $('#' + produk_id).val();
        $.ajax({
            url : "<?php echo base_url();?>welcome/add_to_cart",
            method : "POST",
            data : {produk_id: produk_id, produk_nama: produk_nama, produk_harga: produk_harga, quantity: quantity, produk_foto: produk_foto},
             beforeSend: function() {
                $('.xanimsition').waiting();
            },
            success: function(data){
            //swal(nama, "is added to cart !", "success");
                $.notify("Berhasil Tambah","success");
                $('.xanimsition').waiting('done');
                $(".keranjang").load("mobile/cart");
            }
        });
    });
    String.prototype.getDecimals || (String.prototype.getDecimals = function() {
        var a = this,
            b = ("" + a).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
        return b ? Math.max(0, (b[1] ? b[1].length : 0) - (b[2] ? +b[2] : 0)) : 0
        }), jQuery(document).ready(function() {
            //wcqib_refresh_quantity_increments()
        }), jQuery(document).on("updated_wc_div", function() {
            //wcqib_refresh_quantity_increments()
        }), jQuery(document).on("click", ".plus, .minus", function() {
            var a = jQuery(this).closest(".quantity").find(".qty"),
                b = parseFloat(a.val()),
                c = parseFloat(a.attr("max")),
                d = parseFloat(a.attr("min")),
                e = a.attr("step");
            b && "" !== b && "NaN" !== b || (b = 0), "" !== c && "NaN" !== c || (c = ""), "" !== d && "NaN" !== d || (d = 0), "any" !== e && "" !== e && void 0 !== e && "NaN" !== parseFloat(e) || (e = 1), jQuery(this).is(".plus") ? c && b >= c ? a.val(c) : a.val((b + parseFloat(e)).toFixed(e.getDecimals())) : d && b <= d ? a.val(d) : b > 0 && a.val((b - parseFloat(e)).toFixed(e.getDecimals())), a.trigger("change")
    });
});