how to return php variable to Jquery function to be used to multiply values

Question

Trying to have several checkboxes multiply and add where there are multiple products. would it be possible to use a for statement in jquery against the number of rows in a database or have it run without it?

I've reduced the code i had to a compact version to add up checkboxes and multiply against a multiplier that is a POST from a previous page. now this script won't run for any of the products and wandering what could be used to bridge the problem between client side and server side script. I'm confused about the method needed to use a php variable in a jquery function. I thought of use an onclick to call function for a checkbox clicked but im trying to run this on DOM ready. If anyone can perhaps tell me in the simplest terms how this may be possible I will happily do more research.

<?php
//CONNECTION, QUERY AND MISC ///

$count = mysqli_num_rows($result);
$i = 1;

while ($row = mysqli_fetch_assoc($result)) 
{
    $kilo1 = $row['kilo1'];
    $kilo2 = $row['kilo2'];

    $price1 = $row['price1'];
    $price2 = $row['price2'];
    $price3 = $row['price3'];
    $price4 = $row['price4'];

    $multiplier = 2;
    $qri = "qr"."$i";
    $userdaily = "userdaily"."$i";
    $usertotal = "usertotal"."$i";
    $pricef1 = "price1"."$i";
    $pricef2 = "price2"."$i";

    echo "<form enctype='multipart/form-data' name='contactform' method='POST' action='something.php'>";
    echo "<input type='hidden' name='multiplier' id='multiplier' value='$multiplier'>";
    echo "<input type='checkbox' name='checkbox1' id='$qri' value='$price1'>";
    echo "<input type='checkbox' name='checkbox2' id='$qri' value='$price2'>";
    echo "<input type='checkbox' name='checkbox3' id='$qri' value='$price3' 
                 class='insure'>";
    echo "<input type='checkbox' name='checkbox4' id='$qri' value='$price4' 
                 class='insure'>";
    echo "<input type='checkbox' name='checkbox5' id='$qri' value='$kilo1' 
                 class='kilo'>";
    echo "<input type='checkbox' name='checkbox6' id='$qri' value='$kilo2' 
                 class='kilo'>";

    /////TOTALS VISIBLE AND HIDDEN/////
    echo "<span id='$userdaily'></span>";
    echo "<span id='$usertotal'></span>";
    echo "<input type='hidden' name='pricef1' id='$pricef1' value=''>";
    echo "<input type='hidden' name='pricef2' id='$pricef2' value=''>";
    echo "<input type='submit'>";

    if($i%4==0 || $i == $count) echo '<br>';

    $i++;    
}
?>

<script>
$(function() 
{
  $("input.kilo").change(function() 
  {
    $("input.kilo").not(this).prop("checked", false);
  });

  $("input.insure").change(function() 
  {
    $("input.insure").not(this).prop("checked", false);
  });

  $(document).ready(function() 
  {
    //get the values of the selected options
    var counter = parseInt("<?php echo $count;?>");
    for (i = 1; i <= counter; i++)
    {
      let v = $.map($("input[id^='qr+i+']:checked"), function(t) 
      {
        return parseFloat($(t).val());
      }); 

      let s = v.reduce((a, b) => a + b); 
      //sum them up to a daily total
      console.log(v);

      $("#<?php echo $userdaily;?>").text('R' + s + '/day');    
      $("#<?php echo $usertotal;?>").text('R' + s * 
      parseFloat($("#multiplier").val()) + '/day');
      $("#<?php echo $pricef1;?>").val(s);
      $("#<?php echo $pricef2;?>").val(s * parseFloat($("#multiplier").val()));
    }
  });
});     
</script>

I have a list of product each with a daily total and a total of the number of days, each product has completely different prices. I tried to create this in a fiddle and it works find without the use of variables, I realise that Jquery and php are different in their uses and I'm not sure how to work around this.

Answer 1

As treyBake mentionned, if you need to pass information from PHP to jQuery back to PHP and so forth, use hidden DOM elements and make Ajax requests.

This will also allow you to update your data in real time.

Okay so for instance you can hide your number count in a hidden input

<input type="hidden" value="<?php echo $count;?> " name="countrows" id="countrows"> 

Now you can retrieve in your jQuery :

var counter = $("#countrows").val();

Get value of checked checkbox with is.checked :

var x = $("#checkbox").is(":checked");