JS переключение класса

Недавно я начал изучать JS и сделал калькулятор расчета стоимости на чистом JS. Калькулятор работает нормально, но когда я попытался сделать так, чтобы после нажатия на цвет товара или его размер, изменился их стиль (т.е. добавился .active). У меня получилось сделать 50% дела.

ФОРМА HTML

<form onsubmit="return false;" id="calc">
    <div class="row">
        <div class="col-12 col-md-6">
            <p>Тип</p>
    <div class="row">
    <label for="abs" class="col-12 col-md-6 cm">
        <input type="radio" name="type" id="abs" value="abs" onclick="selectedType()" class="dn">
        <a class="mybtn outline">ABS Пластик</a>
    </label>
    <label for="polyc" class="col-12 col-md-6 cm">
        <input type="radio" name="type" id="polyc" value="polyc" onclick="selectedType()" class="dn">
        <a class="mybtn outline">Поликарбонат</a>
    </label>
    <label for="polyp" class="col-12 col-md-6 cm">
        <input type="radio" name="type" id="polyp" value="polyp" onclick="selectedType()" class="dn">
        <a class="mybtn outline">Полипропилен</a>
    </label>
    </div>
    <div class="row">
        <div class="col-12 col-md-6">
            <p>Размер</p>
    <label for="37" class="sizes">
        <input type="radio" name="size" id="37" onclick="selectedSize()" value="37" class="dn">
        <div class="size">
            <div class="s1">S</div>
            <div class="s2">37 Л</div>
        </div>
    </label>
    <label for="56" class="sizes">
        <input type="radio" name="size" id="56" onclick="selectedSize()" value="56" class="dn">
        <div class="size">
            <div class="s1">M</div>
            <div class="s2">56 Л</div>
        </div>
    </label>
    <label for="89" class="sizes">
        <input type="radio" name="size" id="89" onclick="selectedSize()" value="89" class="dn">
        <div class="size">
            <div class="s1">L</div>
            <div class="s2">89 Л</div>
        </div>
    </label>
    <p>Цвет</p>
    <label for="red">
        <input type="radio" name="color" id="red" onclick="selectedColor()" value="color" class="dn">
        <span>Черный</span>
    </label>
    <label for="black">
        <input type="radio" name="color" id="black" onclick="selectedColor()" value="color" class="dn">
        <span>Белый</span>
    </label>
    <label for="blue">
        <input type="radio" name="color" id="blue" onclick="selectedColor()" value="picture" class="dn">
        <span>Картинка на чемодане</span>
    </label>
    <a onclick="totalPrice(), selectedInfo()" class="mybtn" style="display: block;">Расчитать</a>
        </div>
        <div class="col-12 col-md-6">
            <div id="info">
            </div>
            <h3 id="price">0.00</h3>
        </div>
    </div>
        </div>
        <div class="col-12 col-md-6">
            asd
        </div>
    </div>
</form>

КОД JS

var form=document.forms['calc'];
var types=new Array();
types['abs']=2550;
types['polyc']=30;
types['polyp']=40;
var sizes=new Array();
sizes['37']=0;
sizes['56']=200;
sizes['89']=400;
var design=new Array();
design['color']=0;
design['picture']=10;
var info=new Array();
info['width']=40;
info['height']=55;
info['depth']=20;
info['weight']=2.5;
function  selectedSize(){
    var size_price=0, selectedSize=form.elements['size'];
    for (var i=0; i<selectedSize.length; i++){
        if (selectedSize[i].checked){
            size_price=parseInt(sizes[selectedSize[i].value]);
            break;
        }
    }
    return size_price;
}
function selectedType(){
    var type_price=0, selectedType=form.elements['type'];
    for (var i=0; i<selectedType.length; i++){
        if (selectedType[i].checked){
            type_price=parseInt(types[selectedType[i].value]);
            break;
        }
    }
    return type_price;
}
function selectedColor(){
    var design_price=0, selectedDesign=form.elements['color'];
    for (var i=0; i<selectedDesign.length; i++){
        if (selectedDesign[i].checked){
            design_price=parseInt(design[selectedDesign[i].value]);
            break;
        }
    }
    return design_price;
}
function totalPrice(){
    var price=selectedType()+selectedSize()+selectedColor();
    document.getElementById('price').innerHTML=price+" RUB";
}
function selectedInfo() {
    var info=new Array();
    if (document.querySelector('input[name="size"]:checked').value==37){
        info['height']=55;
        info['width']=40;
        info['depth']=20;
        info['weight']=2.5;
    }
    else if (document.querySelector('input[name="size"]:checked').value==56){
        info['height']=64;
        info['width']=44;
        info['depth']=25;
        info['weight']=3.5;
    }
    else {
        info['height']=73;
        info['width']=52;
        info['depth']=29;
        info['weight']=3.7;
    }
    var inf='<div>Height: <span>'+info['height']+'</span></div><div> Width: <span>'+info['width']+'</span></div><div> Depth: <span>'+info['depth']+'</span></div><div> Weight: <span>'+info['weight']+'</span></div><div>';
    document.getElementById('info').innerHTML=inf;
}

С jQuery пока не знаком. Надеюсь на вашу помощь новичку!