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();
    }

    updateTotal();
});

$('#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();
    }
    updateTotal();
});

$('input[name=weight]').change(function () {
    updateTotal();
});

var updateTotal = function () {

    var total = 0;

    total += parseFloat($('input[name=weight]:checked').attr('prize'));

    total += ($('input[name=urgentchk]:checked').length > 0) ? parseFloat($('input[name=urgentchk]:checked').attr('prize')) : 0;

    total += ($('input[name=meetchk]:checked').length > 0) ? parseFloat($('input[name=meetchk]:checked').attr('prize')) : 0;

    $('#total').html("Total: $" + total);

};

// Update total on page load
updateTotal();