Trouble in displaying real time calculation using javascript

I am creating a math quiz in which user will give input through form fields like below example
– tese are 5 form fields – 1) no.of questions – max limit is upto 100

2)how many numbers user want in selected no.of qquestion – limit min 2 to max 10 numbers

3)for what digits numbers(1 ,2,3, and mix digits)) user wants

4)chose operations(+,-,*,/)- user can select one or mor than one or all operation
5)select time duration for the above inputs
– then after clicking submit button a slideshow will start which will display the questions or expressions one by one after some time in addition to this the elements inside questions will also displaying one by one after some time
-Basically its a mind testing thing where user have to remember the expression displaying on screen in one element at a time manner and simultaniously calculate the result in his mind ,
and answer will be shown to him only he clicks on show – answer button
-NOTE – after giving input the questions along with their answer are generating randomly because I am using rand() function in php nd all the generated questions are storing in an array named $expressions.
– Upto this everything is working perfectly fine for my purpose
– but I want to dispay real time calculation in a small block named total in bottom right corner in output , I have created that block like this

<div class=”total”> Total: <input id=’total1′ type=”text” name=”calculate” placeholder=”Total …”/></div>

<?php

//getting input data through form
function get_input_data() {
$seed = $_POST[‘seed’] ?? rand();
$play = $_POST[‘play’];
$num_digits = intval($_POST[‘num_digits’]) ?? 1;
$num_questions = intval($_POST[‘num_questions’]) ?? 1;
$num_operands = intval($_POST[‘num_operands’]) ?? 1;
$duration = $_POST[‘duration’] ?? 0;

// Read operations from the POST params and map the array that looks like
// [‘Addition’, ‘Multiplication’] as [‘+’, ‘*’]

$operations_map = array(
‘Addition’ => ‘+’,
‘Subtraction’ => ‘-‘,
‘Multiplication’ => ‘*’,
‘Division’ => ‘/’,
);

$operations = array_map(function($operation_name) use ($operations_map){
return $operations_map[$operation_name];
}, $_POST[‘operation’] ?? []);

// generate expressions using the specified random seed
srand($seed);
$expressions = array();
for ($i = 1; $i <= $num_questions; $i++) {
$expression = generate_expression($num_operands, $operations, $num_digits);
$expression_string = implode(” “, $expression);
$result = eval(“return ($expression_string);”);
$expressions[] = compact(“expression”, “result”);
}

return compact(
‘play’,
‘seed’,
‘num_digits’,
‘num_questions’,
‘num_operands’,
‘operations’,
‘expressions’,
‘duration’
);

}

function output_slideshow_header($data) {
extract($data);
if (!empty($operations)) {
$num_operations = count($operations); //count selected operation
?>
<div class=”row”>
<div class=”timer” style= ‘font-size: 25px;color: #ffe6e6;’>
<?php if($duration == 0)
{ ?>
Duration:<label id=”minutes”>00</label>:<label id=”seconds”>00</label>
<!– <span id=”minutes”></span>:<span id=”seconds”></span> –>
<?php

}
else
{
echo “Duration:” ?><time id=”countdown”><script> var seconds = <?php echo $duration * 60; ?>;</script>

<?php echo $duration;
}
?>
</time>
</div>
</div>
<?php
}
}

function output_slide($slide_data, $index=1) {
$expression = $slide_data[‘expression’];
$result = $slide_data[‘result’];
?>
<div class=”slide” id=”out”>
<div class=”head”>Q(<?php echo $index+1.?>).</div><br>
<div class=”expression flex-row” id=”exp”>
<?php
$iCount = count($expression);
foreach($expression as $key => $item) { ?>
<span class=”slide-item” id=”visible”><center> <?php

//logic 1 for operand and operator togather
if($item == “*”)
{
echo “x”.$expression[$key+1];;
}
elseif($key == 0 && $key < $iCount -1)
{
echo $item;
}
elseif($key % 2 !== 0)
{
echo $item.$expression[$key+1];
//$key++;
}
else
{
//
}
?></span><!–displaying each item at a time–>
<?php } ?>
<center><span class=”answer” id=”place”>
<span class=”answer-placeholder”>
=****
</span>

<span class=”answer-content”><!–displaying result–>
<?php echo str_replace(‘,00’, ”, number_format($result, 2, ‘,’, ”)); // e.g. 100,00 becomes 100?>
</span>

</span></center>
</div><br><br><br><br><br><br><br><br><br><br>
<center><div class=”dotin”><?php
for ($j=0; $j<count($expression); $j++) {
?><a class=”dots-cont” onclick=”goToItem(<?php echo $j ?>)”></a><?php
}
?></div></center>
</center>

<a class=”show-answer button” onclick=”goToItem(<?php echo $j ?>)”>SHOW ANSWER</a><br>
<div class=”total”> Total: <input id=’total1′ type=”text” name=”calculate” placeholder=”Total …”/></div>

</div>
<?php
}
?>

now I tried but I am confused on how to display the real time calcualtion using javascript because here expressions are generating randomly using rand() function and storing in array like I have posted above , Please help me to fix it ?

Also in #PHP _↴