JSFiddle - React, Tailwind, and code Playground

HTML

<br>
<input type="checkbox" name = "drinks[]" class = "items" value ="cola">
<i class="helper"></i>
                                                          <strong>cola</strong>                                             <strong>P</strong>
<input id = 'cola' type="number" value="100" readonly="readonly" style = "border: 0">

<br>
<input type="checkbox" name = "food[]" onchange='handleChange(this);' class = "items" value ="burger">
<i class="helper"></i>
                                                          <strong>burger</strong>                                             <strong>P</strong>
<input id = 'burger' type="number" value="200" readonly="readonly" style = "border: 0">

<input type="number" id="total" name="total" readonly value=0>

JavaScript

function handleChange(checkbox) {
    if(checkbox.checked == true){
      var total = parseInt($('#total').val());
      alert(total);
    }else{
        document.getElementById("submit").setAttribute("disabled", "disabled");
   }
}

$('input[type="checkbox"]').change(function(){
    var totalprice = parseInt($('#total').val());
    
    if($('.items:checked').val() =='cola')
    {
      $('input[type="checkbox"]:checked').each(function(){
          totalprice= totalprice + parseInt($('#cola').val());
      });
     
    }
    
     $('#total').val(totalprice);
});