What are some best practices for handling PHP calculations and passing them to HTML elements using JavaScript?

When handling PHP calculations and passing them to HTML elements using JavaScript, it's best practice to perform the calculations in PHP and then pass the results to JavaScript for display. This helps to separate the logic from the presentation layer and ensures that the calculations are accurate before being displayed on the webpage.

<?php
// Perform calculations in PHP
$num1 = 10;
$num2 = 5;
$sum = $num1 + $num2;
?>

<script>
// Pass the calculated result to a JavaScript variable
var sum = <?php echo $sum; ?>;

// Display the result in an HTML element
document.getElementById("result").innerHTML = "The sum is: " + sum;
</script>

<div id="result"></div>