JSFiddle - React, Tailwind, and code Playground

by Nikola Mihin

HTML

<fieldset class="vfb-fieldset vfb-fieldset-1 dosha-test  dosha-test" id="item-vfb-10">
    <div class="vfb-legend">
         <h3>Dosha test</h3>

    </div>
    <ul class="vfb-section vfb-section-1">
        <li class="vfb-item vfb-item-checkbox  " id="item-vfb-5">
            <label for="" class="vfb-desc">Vata</label>
            <div><span class="vfb-span"><input name="vfb-5[]" id="vfb-5-0" value="Slabo pamtim i brzo zaboravljam" class="vfb-checkbox   vata-column" type="checkbox"><label for="vfb-5-0" class="vfb-choice">Slabo pamtim i brzo zaboravljam</label></span><span class="vfb-span"><input name="vfb-5[]" id="vfb-5-1" value="Brz sam u obavljanju aktivnosti" class="vfb-checkbox   vata-column" type="checkbox"><label for="vfb-5-1" class="vfb-choice">Brz sam u obavljanju aktivnosti</label></span><span class="vfb-span"><input name="vfb-5[]" id="vfb-5-2" value="Teško dobivam na težini, mršav sam" class="vfb-checkbox   vata-column" type="checkbox"><label for="vfb-5-2" class="vfb-choice">Teško dobivam na težini, mršav sam</label></span><span class="vfb-span"><input name="vfb-5[]" id="vfb-5-3" value="Većinom imam hladne ruke i stopala" class="vfb-checkbox   vata-column" type="checkbox"><label for="vfb-5-3" class="vfb-choice">Većinom imam hladne ruke i stopala</label></span><span class="vfb-span"><input name="vfb-5[]" id="vfb-5-4" value="Puno se brinem" class="vfb-checkbox   vata-column" type="checkbox"><label for="vfb-5-4" class="vfb-choice">Puno se brinem</label></span><span class="vfb-span"><input name="vfb-5[]" id="vfb-5-5" value="Teško podnosim hladno vrijeme" class="vfb-checkbox   vata-column" type="checkbox"><label for="vfb-5-5" class="vfb-choice">Teško podnosim hladno vrijeme</label></span><span class="vfb-span"><input name="vfb-5[]" id="vfb-5-6" value="Lako mijenjam mišljenje" class="vfb-checkbox   vata-column" type="checkbox"><label for="vfb-5-6" class="vfb-choice">Lako mijenjam mišljenje</label></span><span class="vfb-span"><input name="vfb-5[]"...

JavaScript

//DOSHA TEST
jQuery( ".vfb-item" ).on( 'click','input',function() {
    function setDosha(){
        var numOfChecked = jQuery('.vfb-section input:checkbox:checked').length;
        var doshaVata = jQuery('.vata-column:checked').length;
        var doshaPitta = jQuery('.pitta-column:checked').length;
        var doshaKapha = jQuery('.kapha-column:checked').length; 
        var vataScore = (doshaVata/numOfChecked)*100;
        var pittaScore = (doshaPitta/numOfChecked)*100;
        var kaphaScore = (doshaKapha/numOfChecked)*100;
        jQuery( ".dosha-score" ).fadeOut(500);
        setTimeout(function(){
            jQuery('.vata-score span').text(Math.round(vataScore));;
            jQuery('.pitta-score span').text(Math.round(pittaScore));
            jQuery('.kapha-score span').text(Math.round(kaphaScore));
        },500);    
        jQuery( ".dosha-score" ).fadeIn(500);
    }
    var checkDosha = jQuery(this).attr('class');
    if (/vata-column/i.test(checkDosha)){
       setDosha();      
    }    
    if (/pitta-column/i.test(checkDosha)){
       setDosha();
    }
    if (/kapha-column/i.test(checkDosha)){
       setDosha();
    }    
});