JSFiddle - React, Tailwind, and code Playground

by shiataz12

HTML

<label for="mySelect">No. Days</label>
<select name="mySelect" id="mySelect">
<option name="one" value="1">1</option>
<option name="two" value="2">2</option>
<option name="three" value="3">3</option>
<option name="four" value="4">4</option>
<option name="five" value="5" selected>5</option>
</select><br><br>
<label for="checkbox1">100kms</label>
<input type="checkbox" name="checkbox1" value="125" id="qr1" checked><br><br>
<label for="checkbox2">200kms</label>
<input type="checkbox" name="checkbox2" value="225" id="qr2"><br><br>
<label for="checkbox3">tyre</label>
<input type="checkbox" name="checkbox3" value="20" id="qr3"><br><br>
<label for="checkbox4">glass</label>
<input type="checkbox" name="checkbox4" value="20" id="qr3"><br><br>
Daily :<span id="userdaily"> </span><br><br>
Total :<span id="usertotal"> </span>

JavaScript

$(document).ready(function(){
    $('input[name="checkbox1"]').click(function(){
        $('input[name="checkbox2"]').prop('checked', false);
    });
		$('input[name="checkbox2"]').click(function(){
        $('input[name="checkbox1"]').prop('checked', false);
    });
		$('input[name="checkbox1"]').checked(function(){
		displayVals1();
		});
		
});
var $cbs4 = $("#qr3");
function displayVals1() {
      Calculate1();
			Calculate2();
			var singleValues1 = $("#qr1").val();
			$cbs4.each(function() {
        if (this.checked)
            singleValues1 = parseInt(singleValues1) + parseInt(this.value);
   					
		});
      $("#pricef1").text(singleValues1);
}
var $cbs5 = $("#qr3");
function displayVals2() {
      Calculate3();
			Calculate4();
			var singleValues2 = $("#qr2").val();
			$cbs4.each(function() {
        if (this.checked)
            singleValues2 = parseInt(singleValues2) + parseInt(this.value);
   					
		});
      $("#pricef1").text(singleValues2);
}
var $cbs = $("#qr3");
function Calculate1() {
		var kms1 = $("#qr1").val();
    var total = $("#mySelect").val();
    $cbs.each(function() {
        if (this.checked)
            total = parseInt(total) * parseInt(this.value);
   					kms1 =  parseInt(total) * parseInt(kms1);
						});
    $("#usertotal").text('R ' + total + kms1 +'/day');
}
var $cbs1 = $("#qr3");
function Calculate2() {
				var total1 = $("#qr1").val();
    $cbs1.each(function() {
        if (this.checked)
            total1 = parseInt(total1) + parseInt(this.value);
   				
		});
    $("#userdaily").text('R ' + total1 +'/day');
}
var $cbs2 = $("#qr3");
function Calculate3() {
		var kms2 = $("#qr2").val();
    var total2 = $("#mySelect").val();
    $cbs2.each(function() {
        if (this.checked)
            total2 = parseInt(total2) * parseInt(this.value);
   					kms2 =  parseInt(total2) * parseInt(kms2);

		});
		
    $("#usertotal").text('R ' + total2 + kms2 +'/day');
}
var $cbs3 = $("#qr3");
function Calculate4() {
				var total3 =...