JSFiddle - React, Tailwind, and code Playground

by Al Kasih

HTML

<label id="subt0"></label>

<div id="web1" data-price="5">web1</div>
<div id="web2" data-price="2">web2</div>


<input name="service1" type="checkbox" id="ser1" data-price="1" value="1" title="Service 1" />
<input name="service2" type="checkbox" id="ser2" data-price="5" value="1" title="Service 2" />

CSS

.highlight {
    color:red;
}

JavaScript

var start_price = 0;
        
        $("#web1, #web2").click(function(){
            
			var amountToAdd = 0.0;
            
            $(this).toggleClass( "highlight" );

                        $("#web1, #web2").each(function(){

                if($(this).hasClass('highlight')) 
                    {
                        amountToAdd += parseFloat($(this).attr('data-price'));
                    }
       });            
            
            $('#subt0').text(parseFloat(amountToAdd+start_price).toFixed(2));
       });