JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<p>PICK ONE</p>
<input type="radio" name="weight" value="range-1" prize="10" checked>
<label>0-10 ($ 10)</label>
<input type="radio" name="weight" value="range-2" prize="20" ><label>10-20 ($ 20)</label>
<input type="radio" name="weight" value="range-3" prize="30"><label>20-30 ($ 30)</label>
</div>

<div>
<p>ADD EXTRA</p>
<input type="checkbox" id="urgentchk" name="urgentchk" value="1" prize="40" /><label>Urgent ($ 40)</label>
<input type="checkbox" id="meetchk" name="meetchk" value="1" prize="60" /><label>Meet ($ 60)</label>
</div>

<div>
<p>TOTAL</p>
<table id="items"></table>
<table id="total"></table>    
</div>

JavaScript

$('#urgentchk').change(function() {
    if(this.checked)
    {
        var content = "<tr id='one'><td>Urgent $ 40</td></tr>";
        var prize = parseFloat($(this).attr('prize'));
        $('#items').append(content);
    }
    else
    {
        $('#one').remove();
    }
});

$('#meetchk').change(function() {
    if(this.checked)
    {
        var content = "<tr id='two'><td>Meet $ 60</td></tr>";
        var prize = parseFloat($(this).attr('prize'));
        $('#items').append(content);
    }
    else
    {
        $('#two').remove();
    }
});