JSFiddle - React, Tailwind, and code Playground
HTML
<form name="myForm">
<table>
<thead>
<tr>
<th>Key Stage 1</th>
<th>Buy on Paper</th>
<th>Buy on CD</th>
<th>Buy on both</th>
</tr>
</thead>
<tbody>
<tr>
<td>Year 1 All Blocks & Units (15 assessments in total)</td>
<td>
<label>
<input type="radio" name="keystage1" value="0" data-price="2500" />
£25</label>
</td>
<td>
<label>
<input type="radio" name="keystage1" value="1" data-price="2500" />
£25 †</label>
</td>
<td>
<label>
<input type="radio" name="keystage1" value="2" data-price="4000" />
£40</label>
</td>
</tr>
<tr>
<td>Year 2 All Blocks & Units (15 assessments in total)</td>
<td>
<label>
<input type="radio" name="keystage1" value="3" data-price="2500" />
£25</label>
</td>
<td>
<label>
<input type="radio" name="keystage1" value="4" data-price="2500" />
£25 †</label>
</td>
<td>
<label>
<input type="radio" name="keystage1" value="5" data-price="4000" />
£40</label>
</td>
</tr>
<tr>
<td>Give me it all and save some monehhhh!</td>
<td>
<label>
<input type="radio" name="keystage1" value="6" data-price="4750" />
£47.50</label>
</td>
<td>
<label>
<input type="radio" name="keystage1" value="7" data-price="4750" />
£47.50 †</label>
</td>
<td>
<label>
<input type="radio" name="keystage1" value="8"...
JavaScript
var frm = document.forms.myForm;
frm.onchange = function(e) {
var tot = 0;
for( var i = 0, l = frm.elements.length; i < l; i++ ) {
if( frm.elements[i].checked ) {
tot += parseFloat( frm.elements[i].getAttribute('data-price') );
}
}
document.getElementById('total').value = ( tot / 100 );
}