JSFiddle - React, Tailwind, and code Playground

by Kishore Sahasranaman

HTML

<input class="adType" name="adType" type="radio" value="platinum">
    <input class="adType" name="adType" type="radio" value="gold">
    <input class="adType" name="adType" type="radio" value="silver"> 

<div class="col-md-12" id="step2">
    <h3>Step 2</h3>
    <div id="allPackage">
        <label class="checkbox"><input checked class="location" name=
        "countrylocation[]" type="checkbox" value="UK"> UK
        (default)</label> <label class="checkbox"><input class="location"
        name="countrylocation[]" type="checkbox" value="SP"> Spain</label>
        <label class="checkbox"><input class="location" name=
        "countrylocation[]" type="checkbox" value="IT"> Italy</label>
    </div><label class="checkbox"><input class="location" name=
    "countrylocation[]" type="checkbox" value="FULLPACK"> Full Language
    Package</label>
</div>
<div class="col-md-9">
    <p>Price: <span id="totalprice"></span> EUR</p>
</div>

JavaScript

var adType;
var totalprice = 0.0;
var location;
var countLocations =1;

//hide step 2 div
$('#step2').hide();
$('#totalprice').html(totalprice);

$('.adType').change(function () {
    //after select one show next step
    $('#step2').show('slow');
    adType = $(this).val();
    //var checked = $("#isAgeSelected").is(':checked').val();   
    console.log(adType);
    switch(adType) {
        case "platinum":
            totalprice = 250.00;
            $('#totalprice').html(totalprice*countLocations)
            break;
        case "gold":
             totalprice = 125.00;
             $('#totalprice').html(totalprice*countLocations)
            break;
        case "silver":
             totalprice = 50.00;
             $('#totalprice').html(totalprice*countLocations)
            break;        
        default:
            totalprice = 0.00;
            $('#totalprice').html(totalprice*countLocations)
    }
    loadCheckBoxState(adType);
});

$('.location').change(function () {

    location = $(this).val();
    countLocations = $('[name="countrylocation[]"]:checked').length;
    $('#totalprice').html(totalprice*countLocations);
    console.log(countLocations);

    if (location == 'FULLPACK') {

        $( "#allPackage" ).toggle(function() {
             $('#totalprice').html("new Price!")
        });

    }
});
var _currentState;
function loadCheckBoxState(adType){
   debugger;
    var currentState = $('[name="countrylocation[]"]:checked').map(function(e,obj){ return obj.value; });
	_currentState[adType] = currentState;
     console.log(currentState);
}