JSFiddle - React, Tailwind, and code Playground

HTML

<div id="formular">
  <div id="formulartekst">
    <form>

      <h2 class="formskrift">Order Hot Food</h2>
      <p class="kroner"><h3>First selection is KES 500 per successive selections are KES 750, KES 1000 (Increments by 250)</h3></p>
      <ul style="list-style-type:none">
<li><input name="product" value="500" type="checkbox" id="p1" onclick="totalIt(this.name)" />ARGENTINA </li>
<li><input name="product" value="500" type="checkbox" id="p1" onclick="totalIt(this.name)" />AUSTRALIA </li>
<li><input name="product" value="500" type="checkbox" id="p1" onclick="totalIt(this.name)" />BELGIUM </li>
<li><input name="product" value="500" type="checkbox" id="p1" onclick="totalIt(this.name)" />BRAZIL</li>
<li><input name="product" value="500" type="checkbox" id="p1" onclick="totalIt(this.name)" />COLOMBIA </li>
<li><input name="product" value="500" type="checkbox" id="p1" onclick="totalIt(this.name)" />COSTA RICA </li>
<li><input name="product" value="500" type="checkbox" id="p1" onclick="totalIt(this.name)" />CROATIA</li>
<li><input name="product" value="500" type="checkbox" id="p1" onclick="totalIt(this.name)" />DENMARK</li>
<li><input name="product" value="500" type="checkbox" id="p1" onclick="totalIt(this.name)" />EGYPT </li>
<li><input name="product" value="500" type="checkbox" id="p1" onclick="totalIt(this.name)" />ENGLAND</li>
<li><input name="product" value="500" type="checkbox" id="p1" onclick="totalIt(this.name)" />FRANCE</li>
<li><input name="product" value="500" type="checkbox" id="p1" onclick="totalIt(this.name)" />GERMANY</li>
<li><input name="product" value="500" type="checkbox" id="p1" onclick="totalIt(this.name)" />ICELAND</li>
<li><input name="product" value="500" type="checkbox" id="p1" onclick="totalIt(this.name)" />IRAN </li>
<li><input name="product" value="500" type="checkbox" id="p1" onclick="totalIt(this.name)" />JAPAN</li>
<li><input name="product" value="500" type="checkbox" id="p1" onclick="totalIt(this.name)" />KOREA...

JavaScript

var grndTotal = 0;
var total1 = 0;

window.totalIt= function(name) {
  if(name == "product"){
 
  var input = document.getElementsByName("product");
  var total = 0;
	  for (var i = 0; i < input.length; i++) {
		if (input[i].checked) {
		  total += 1;
		}
	  }
  if(total==2){ total1 =  (total*750).toFixed(2);}
  else if(total==3){ total1 =  (total*1000).toFixed(2);}
  else if(total==4){ total1 =  (total*1250).toFixed(2);}
  else if(total==5){ total1 =  (total*1500).toFixed(2);}
  else if(total==6){ total1 =  (total*1750).toFixed(2);}
  else if(total==7){ total1 =  (total*2000).toFixed(2);}
  else if(total==8){ total1 =  (total*2250).toFixed(2);}
  else if(total==9){ total1 =  (total*2500).toFixed(2);}
  else if(total==10){ total1 =  (total*2750).toFixed(2);}
  else if(total==11){ total1 =  (total*3000).toFixed(2);}
  else if(total==12){ total1 =  (total*3250).toFixed(2);}
  else if(total==13){ total1 =  (total*3500).toFixed(2);}
  else if(total==14){ total1 =  (total*3750).toFixed(2);}
  else if(total==15){ total1 =  (total*4000).toFixed(2);}
  else if(total==16){ total1 =  (total*4250).toFixed(2);}
  else if(total==17){ total1 =  (total*4500).toFixed(2);}
  else if(total==18){ total1 =  (total*4750).toFixed(2);}
  else if(total==19){ total1 =  (total*5000).toFixed(2);}
  else if(total==20){ total1 =  (total*5250).toFixed(2);}
  else if(total==21){ total1 =  (total*5500).toFixed(2);}
  else if(total==22){ total1 =  (total*5750).toFixed(2);}
  else if(total==23){ total1 =  (total*6000).toFixed(2);}
  else if(total==24){ total1 =  (total*6250).toFixed(2);}
  else if(total==25){ total1 =  (total*6500).toFixed(2);}
  else if(total==26){ total1 =  (total*6750).toFixed(2);}
  else if(total==27){ total1 =  (total*7000).toFixed(2);}
  else if(total==28){ total1 =  (total*7250).toFixed(2);}
  else if(total==29){ total1 =  (total*7500).toFixed(2);}
  else if(total==30){ total1 =  (total*7750).toFixed(2);}
  else if(total==31){ total1 =  (total*8000).toFixed(2);}
  else...