Calculate price plan

Community resources Getting started
1

My read-only link: https://preview.webflow.com/preview/test-price-table?utm_medium=preview_link&utm_source=designer&utm_content=test-price-table&preview=4b35cda1dd52c3237fc7c8e3cda4c53f&workflow=preview
My publish link: https://test-price-table.webflow.io/

Hi!
What I need help with is that when you click on a Number of carriers it should sense which option is checked on “packages/year” and then take that price + (itself * 2%) and display.
If you open form-calc-w and custom code you can see the HTML and Custom code.
Any help I’m very thankful for!

I’ll paste the Custom Code here:

let totals = {
        essential: 255,
        professional: 438,
        premium: 659,
    }
    
    const keys = Object.keys(totals);
    
    function updateTotals() {
            for(let i = 0; i < keys.length; i++) {
    
                $('#total-' + keys[i]).text('' + totals[keys[i]]);
    
        }
    }
    
    function addToTotals(essential, professional, premium) {
        totals.essential += parseInt(essential);
        totals.professional += parseInt(professional);
        totals.premium += parseInt(premium);
    
        let total = parseInt(essential) + parseInt(professional) + parseInt(premium); 
        totals.total += parseInt(total);
        updateTotals();
    }
    
    function removeFromTotals(essential, professional, premium) {
        totals.essential -= essential;
        totals.professional -= professional;
        totals.premium -= premium;
    
        let total = parseInt(essential) + parseInt(professional) + parseInt(premium); 
        totals.total -= total;
        updateTotals();
    }
    
    function parseTotals(radio, mode) {
        let essential = radio.getAttribute('essential');
        let professional = radio.getAttribute('professional');
        let premium = radio.getAttribute('premium');
    
        if (mode === 'remove') {
            removeFromTotals(essential, professional, premium);
        } else {
            addToTotals(essential, professional, premium);
        }
    }
    
    $(document).ready(function() {
        updateTotals();
        var radios = document.querySelectorAll('input[type=radio]');
        var labels = document.querySelectorAll('label');
        let currentCheck;
        var previousCheck;
        radios.forEach(radio => radio.addEventListener('change', () => {
            currentCheck = radio;
    
            if (currentCheck !== previousCheck) {
                parseTotals(previousCheck, 'remove');
            }
            parseTotals(radio, 'add');
        }));
        
        radios.forEach(radio => radio.addEventListener('mouseup', () => {
            previousCheck = document.querySelector('input[type=radio][name=' + radio.name + ']:checked');
        }));
        
        labels.forEach(label => label.addEventListener('mouseup', () => {
            previousCheck = document.querySelector('input[type=radio][name=' + label.getAttribute('for').slice(0, -1) + ']:checked');
        }));
    
    });

type or paste code here

And the HTML:


    <!-- Number of packages/year question -->
    <div class="calc-field">
        <div class="fieldset-top">
        <div class="fieldset-number">1</div>
        <h4 class="question">Number of packages/year</h4>
        </div>
        <div class="radio-group">
        <input type="radio" class="radio-input" id="products1" name="products" value="1000" essential='0' professional='0' premium='0' checked>
        <label for="products1" class="radio-label">1000</label>
        <input type="radio" class="radio-input" id="products2" name="products" value="2500" essential='200' professional='274' premium='296'>
        <label for="products2" class="radio-label">2500</label>
        <input type="radio" class="radio-input" id="products3" name="products" value="5000" essential='515' professional='640' premium='742'>
        <label for="products3" class="radio-label">5000</label>
        <input type="radio" class="radio-input" id="products4" name="products" value="10000" essential='1019' professional='1285' premium='1584'>
        <label for="products4" class="radio-label">10000</label>
        </div>
    </div>

    <!-- Number of carriers question -->
    <div class="calc-field field-second">
        <div class="fieldset-top">
            <div class="fieldset-number">2</div>
            <h4 class="question">Number of carriers</h4>
        </div>
        <div class="radio-group grop-simple">
            <input type="radio" class="radio-input" id="website1" name="website" value="" essential='0' professional='0' premium='0' checked>
            <label for="website1" class="radio-label">1</label>
            <input type="radio" class="radio-input" id="website2" name="website" value="" essential='5' professional='8' premium='13'>
            <label for="website2" class="radio-label">2</label>
            <input type="radio" class="radio-input" id="website3" name="website" value="" essential='5' professional='9' premium='13'>
            <label for="website3" class="radio-label">3</label>
        </div>
    </div>

</form>
type or paste code here