JSFiddle - React, Tailwind, and code Playground

HTML

<div class="option type_checkbox" id="option-2035"> <span class="required">*</span>
 <b>Type:</b>

    <br>
    <div class="tm-checkbox tm-checked">
        <input type="checkbox" id="option-value-6170" value="6170" name="option[2035][]" data-price-checkbox="10.0000" data-prefix-checkbox="+" class="tm-hide">
    </div>
    <label for="option-value-6170">Type A (+RM10.00)</label>
    <br>
    <div class="tm-checkbox tm-checked">
        <input type="checkbox" id="option-value-6171" value="6171" name="option[2035][]" data-price-checkbox="20.0000" data-prefix-checkbox="-" class="tm-hide">
    </div>
    <label for="option-value-6171">Type B (-RM20.00)</label>
    <br>
</div>
</br>
</br>
<div class="price_placeholder">RM100</div>

JavaScript

var x=100;
var optionCheckbox = function optionCheckbox() {

    var checkbox_price_prefix;
    var checkbox_price = 0;
    // Loop Checkbox
    $('.type_checkbox input[type="checkbox"]').each(function (index) {

        if ($(this).is(':checked')) {
            checkbox_price_prefix = $(this).data('prefix-checkbox');
            checkbox_price = checkbox_price_prefix + $(this).data('price-checkbox');
        }
    });

    return checkbox_price;
}

    function calculateTotal() {

        var option_checkbox_return = optionCheckbox();

        total = x + parseFloat(option_checkbox_return);
        x=total;
        result = parseFloat(Math.round(total * 100) / 100).toFixed(2); // Convert to 2 decimal places
        $('.price_placeholder').html('RM' + result);

    }

$('.type_checkbox input[type="checkbox"]').on('click', function () {
    calculateTotal();
});