Count Clicks using javascript for Multiple Button

Question

This code counts 'clicks' for only first Product in the list fetch from the database but how they can produce 'clicks count' for Remaining products

 <?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = '';
$connect=mysqli_connect("localhost","root","","yii2_advanced");

$query = mysqli_query($connect,"SELECT * FROM product");

$dynamicList ="";
WHILE ($rows = mysqli_fetch_array($query)):


   $idr = $rows['product_id'];
   $product_name = $rows['product_name'];
   $product_amount = $rows['product_amount'];
   $product_type = $rows['product_type'];
    $dynamicList .= '   <script type="text/javascript">
var clicks = 0;
function onClick() {
    clicks += 1;
    document.getElementById("clicks").innerHTML = clicks;
};
function onClick2(){

    if(clicks >0){
        clicks -= 1;
    document.getElementById("clicks").innerHTML = clicks;

}
else if(clicks == 0){

    document.getElementById("clicks").innerHTML = clicks;

}
};
</script>
<table width="100%" border="0" cellspacing="0" cellpadding="6">
    <tr>
      <td width="%" valign="top"><img style="border:#666 1px solid;" src="'. $idr . '.jpg" alt="' . $product_name . '" width="77" height="102" border="1" /></td>
      <td width="83%" valign="top">' . $product_name . '<br />
        Rs.' . $product_amount . '<br />
         <button onClick="onClick2()" type="button"><b>-</b></button>
<p style="display:inline-block;"><a id="clicks">0</a></p>
<button onClick="onClick()"><b>+</b></button>

        </td>
    </tr>
  </table>';
   endwhile;
   ?>

For better illustration I will show you image below:

Answer 1

Try this ;)

  var clicks = {0:0, 1:0}; function onClick(index) { clicks[index] += 1; console.log(index); document.getElementById("clicks" + index).innerHTML = clicks[index]; } function onClick2(index) { if (clicks[index] > 0) { clicks[index] -= 1; document.getElementById("clicks" + index).innerHTML = clicks[index]; } else if (clicks[index] == 0) { document.getElementById("clicks" + index).innerHTML = clicks[index]; } } 

 <table width="100%" border="0" cellspacing="0" cellpadding="6"> <tr> <td width="%" valign="top"><img style="border:#666 1px solid;" src="'. $idr . '.jpg" alt="' . $product_name . '" width="77" height="102" border="1" /></td> <td width="83%" valign="top">' . $product_name . ' <br /> Rs.' . $product_amount . ' <br /> <button onclick="javascript:onClick2(0)" type="button"><b>-</b></button> <p style="display:inline-block;"><a id="clicks0">0</a></p> <button onclick="javascript:onClick(0)"><b>+</b></button> </td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="6"> <tr> <td width="%" valign="top"><img style="border:#666 1px solid;" src="'. $idr . '.jpg" alt="' . $product_name . '" width="77" height="102" border="1" /></td> <td width="83%" valign="top">' . $product_name . ' <br /> Rs.' . $product_amount . ' <br /> <button onClick="onClick2(1);" type="button"><b>-</b></button> <p style="display:inline-block;"><a id="clicks1">0</a></p> <button onClick="onClick(1);"><b>+</b></button> </td> </tr> </table> 

UPDATE 1 FOR multiple items

<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = '';
$connect = mysqli_connect("localhost", "root", "", "yii2_advanced");

$query = mysqli_query($connect, "SELECT * FROM product");

$dynamicList = "";
$index = 0;
while($rows = mysqli_fetch_array($query)):
  $idr = $rows['product_id'];
  $product_name = $rows['product_name'];
  $product_amount = $rows['product_amount'];
  $product_type = $rows['product_type'];
  $dynamicList .= '<table width="100%" border="0" cellspacing="0" cellpadding="6">
    <tr>
      <td width="%" valign="top"><img style="border:#666 1px solid;" src="' . $idr . '.jpg" alt="' . $product_name . '" width="77" height="102" border="1" /></td>
      <td width="83%" valign="top">' . $product_name . '<br />
        Rs.' . $product_amount . '<br />
         <button onClick="onClick2(' . $index . ')" type="button"><b>-</b></button>
<p style="display:inline-block;"><a id="clicks">0</a></p>
<button onClick="onClick(' . $index . ')"><b>+</b></button>
        </td>
    </tr>
  </table>';
  $index++;
endwhile;
?>

<script type="text/javascript">
  var clicks = <?php json_encode(array_fill(0, ($index - 1), 0)); ?>;
  function onClick(index){
    clicks[index] += 1;
    document.getElementById("clicks" + index).innerHTML = clicks[index];
  }

  function onClick2(index){
    if(clicks[index] > 0){
      clicks[index] -= 1;
      document.getElementById("clicks" + index).innerHTML = clicks[index];
    }else if(clicks == 0){
      document.getElementById("clicks" + index).innerHTML = clicks[index];
    }
  }
</script>

Answer 2

Modified your fiddle with jQuery and cleaned PHP like: https://jsfiddle.net/574mL1z1/2/

The key problems are two:

1. You were trying to update same variable ( clicks ) on click of + and - buttons of both the products.
2. Somehow the code you are using in the fiddle for calling JS functions is not working.

I think in a cleaner way you can try:

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

      <table width="100%" border="0" cellspacing="0" cellpadding="6">
        <tr>
          <td width="%" valign="top"><img style="border:#666 1px solid;" src="'. $idr . '.jpg" alt="' . $product_name . '" width="77" height="102" border="1" /></td>
          <td width="83%" valign="top">' . $product_name . '<br />
            Rs.' . $product_amount . '<br />
             <button class="dec" data-id="id1" type="button"><b>-</b></button>
             <p style="display:inline-block;"><a id="clicks_id1">0</a></p>
             <button type="button" data-id="id1" class="inc"><b>+</b></button>
          </td>
        </tr>
      </table>

      <table width="100%" border="0" cellspacing="0" cellpadding="6">
        <tr>
          <td width="%" valign="top"><img style="border:#666 1px solid;" src="'. $idr . '.jpg" alt="' . $product_name . '" width="77" height="102" border="1" /></td>
          <td width="83%" valign="top">' . $product_name . '<br />
             Rs.' . $product_amount . '<br />
             <button class="dec" data-id="id2" type="button"><b>-</b></button>
             <p style="display:inline-block;"><a id="clicks_id2">0</a></p>
             <button type="button" data-id="id2" class="inc"><b>+</b></button>
          </td>
        </tr>
      </table>

<script type="text/javascript">
$(".inc").on("click", function (){
    var dataId = $(this).attr("data-id");
    var clicks = parseInt($("a#clicks_"+dataId).html());
    clicks++;
    $("a#clicks_"+dataId).html(clicks);
});

$(".dec").on("click", function (){
    var dataId = $(this).attr("data-id");
    var clicks = parseInt($("a#clicks_"+dataId).html());

    if (clicks > 0) {
        clicks--;
    }
    $("a#clicks_"+dataId).html(clicks);
});
</script>