JSFiddle - React, Tailwind, and code Playground

by matt9388

HTML

<body class="newreservation">

        <input type="checkbox" label="10" value="15.00">Basket</option>

<div class="rentalcharges">
				<div><label>Rent:</label><input type="text" style="width:50px;" id="rent" value="0"></div>
				<div><label>Cleaning:</label><input type="text" style="width:50px;" id="cleaning" value="0"></br></div>
				<div><label>Booking:</label><input type="text" style="width:50px;" id="booking" value="0"></div>
				<div><label>Taxes:</label><input type="text" style="width:50px;"  id="taxes" value="0"></br></div>
				<div><label>Total:</label><input type="text" style="width:50px;" readonly id="total" value="0"></br></div>

                
                    </body>

JavaScript

$(document).ready(function() {
				$('.newreservation').click(function() {
					var rent = parseFloat($('#rent').val());
					var cleaning = parseFloat($('#cleaning').val());
					var booking = parseFloat($('#booking').val());
					var taxes = parseFloat($('#taxes').val());
					var total = 0;
													var checked;
						 if($('input[type=checkbox]').is(':checked')){
							checked =                             parseFloat($('input[type=checkbox]').val());
							 
						 }else{
							 checked = 0;
						 }
                    total = total + (rent+cleaning+booking+taxes +checked);
					 $('#total').val(total);
					 console.log('total: ' + total);
				});
				$('input[type=checkbox]').change(function(){
						var rent = parseFloat($('#rent').val());
						var cleaning = parseFloat($('#cleaning').val());
						var booking = parseFloat($('#booking').val());
						var taxes = parseFloat($('#taxes').val());
						var total = 0;
												var checked;
						 if($('input[type=checkbox]').is(':checked')){
							checked =                             parseFloat($('input[type=checkbox]').val());
							 
						 }else{
							 checked = 0;
						 }
                    total = total + (rent+cleaning+booking+taxes +checked);

						 $('#total').val(total);
					 });
			});