JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.cpbpublishing.org/wp-content/uploads/cache/fdfd0e6960a43e5a715e99269cdc5c19.js?ver=4.2.2"></script>
<script src="http://www.cpbpublishing.org/wp-content/plugins/jquery-updater/js/jquery-2.1.4.min.js?ver=2.1.4"></script>
<script src="http://www.cpbpublishing.org/wp-content/plugins/fp-testimonials/js/jquery.bxSlider.min.js?ver=4.2.2"></script>
<script src="http://www.cpbpublishing.org/wp-content/plugins/jquery-updater/js/jquery-migrate-1.2.1.min.js?ver=1.2.1"></script>
<script src="http://www.cpbpublishing.org/wp-content/themes/responsive-brix/js/modernizr.custom.js?ver=2.8.3"></script>
<div>
    <label for="rangeInput">How many sermons?</label>
    <input type="text" id="textInput" value="7" style="width: 37px; border: 0; font-weight: bold;">
    <input type="range" name="rangeInput" value="7" min="1" max="15" onchange="updateTextInput(this.value);" -webkit-appearance: none>
</div>
<div class="section">
    <div class="radiostation">
        <div class="radios">
            <label>What are the sermons on?</label>
        </div>
        <div class="radiolist">
            <input type="radio" name="selectMedia" value="20" onclick="calculateTotal()" />Digital audio file
            <br>
            <input type="radio" name="selectMedia" value="25" onclick="calculateTotal()" />CD or cassette
            <br>
            <input type="radio" name="selectMedia" value="30" onclick="calculateTotal()" />Digital video file
            <br>
            <input type="radio" name="selectMedia" value="40" onclick="calculateTotal()" />DVD or VHS</div>
    </div>
    <div class="timetravel">
        <div class="radios">
            <label>Average sermon length?</label>
        </div>
        <div class="radiolist">
            <input type="radio" name="selectLength" value="0" onclick="calculateTotal()" />1-30 minutes
            <br>
            <input type="radio" name="selectLength" value="20" onclick="calculateTotal()" />31-60 minutes
            <br>
   ...

JavaScript

(function ($) {
    $(function () {
        $('.cmn-toggle').each(function () {
            $(this).change(function () {
                var curr_class = '.' + $(this).attr('id');
                var price = $(this).attr('data-price');
                var price_box = $('.pricing-table li.price span');

                $(curr_class).toggleClass('active');

                if (price) {
                    if ($(curr_class).hasClass('active')) {
                        price_box.html(parseInt(price_box.html()) + parseInt(price));
                    } else {
                        price_box.html(parseInt(price_box.html()) - parseInt(price));
                    }
                }
            });
        });
    });
})(jQuery);

function updateTextInput(val) {
    document.getElementById('textInput').value = val;
    calculateTotal();
}

function calculateTotal() {
    var multi = document.getElementById('textInput').value;
    var arr = document.getElementsByName('selectMedia');
    var arry = document.getElementsByName('selectLength');
    var tot = 0;
    var priceBox = $('.pricing-table li.price span');
    for (var i = 0; i < arr.length; i++) {
        if (arr[i].checked) {
            tot += Number(arr[i].value);
        }
    }
    for (var i = 0; i < arry.length; i++) {
        if (arry[i].checked) {
            tot += Number(arry[i].value);
        }
    }
    document.getElementById('totalPrice').innerHTML = tot * Number(multi);
}