Calculate the sum of two variables - twig

Question

I want to calculate the sum of two variables on twig in real time?
is this doable with twig or should I try with Javascript?
I have tried with twig using the code below but it doesnt work in reel time I should complete the form then return to the page(my form on 3 pages)
<div >
<label for="nbStudentClassA" >Number of studentA</label>
<div >
{{ form_widget(form.nbStudentA}}
</div>
</div>
<div >
<label for="nbStudentClassB" >Number of student B</label>
<div>
{{ form_widget(form.nbStudentB}}
</div>
</div>
<div
<label >Sum </label>
<div >
{% set sum = form.vars.value.nbStudentA + form.vars.value.nbStudentB %}
{{ sum }}
</div>
</div>

Answer 1

Server side script will not work in real time, you will need something like jQuery to accomplish this before you refresh the page. You can calculate using jQuery with ease. There are also javascript math plugins you can add that make doing math easier in JS based scripts.
$(document).ready(function() {
$(".calculate").click(function() {
var x = $('input[id="nbStudentClassA"]').val();
var y = $('input[id="nbStudentClassB"]').val();
var mult = x + y;
var add = (+x) + (+y);
var sub = (+x) - (+y);
var div = x / y;
$('.result').html("Multiply: " + mult + "<br /> Addition: " + add + "<br />Subtration: " + sub + "<br />Division : " + div);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Enter two numbers to calculate as an example: Addition, subtraction, multipication and division</label>
<div>
<label for="nbStudentClassA" >Number of student A</label>
<input id="nbStudentClassA" type="text" name="nbStudentClassA" />
</div>
<div>
<label for="nbStudentClassB" >Number of student B</label>
<input id="nbStudentClassB" type="text" name="nbStudentClassB" />
</div>
<div class="result"></div>
<button type="button" class="calculate">Calculate</button>