JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content" id="packcontent_01" style="display: none;"></div>
<div class="content" id="packcontent_02" style="display: none;"></div>
<div class="content" id="packcontent_03" style="display: none;"></div>
<div class="content" id="packcontent_04" style="display: none;"></div>

<div class="content" id="order_total" style="display: none;"></div>

<form name='packaging' action="checkout.php" method='post' onSubmit="return checkEmpty()">
<input type='submit' name='submit' id='submit' class="submitorder" value='Check Out' />    
    
<p>Pack 1</p>
<input type="text" class="pack" name="pack01" id="pack01" autocomplete="off" maxlength="2" value="0" onKeyPress="validate_numeric(event)"/>
<input type="hidden" class="pack" id="pack01-name" name="pack01-name" value="Pack 1" />
<input type="hidden" class="pack" id="pack01-price" name="pack01-price" value="5.00" />
<p>Pack 2</p>
<input type="text" class="pack" name="pack02" id="pack02" autocomplete="off" maxlength="2" value="0" onKeyPress="validate_numeric(event)" />
<input type="hidden" class="pack" id="pack02-name" name="pack02-name" value="Pack 2" />
<input type="hidden" class="pack" id="pack02-price" name="pack02-price" value="6.00" />
<p>Pack 3</p>
<input type="text" class="pack" name="pack03" id="pack03" autocomplete="off" maxlength="2" value="0" onKeyPress="validate_numeric(event)"/>
<input type="hidden" class="pack" id="pack03-name" name="pack03-name" value="Pack 3" />
<input type="hidden" class="pack" id="pack03-price" name="pack03-price" value="7.00" />
<p>Pack 4</p>
<input type="text" class="pack" name="pack04" id="pack04" autocomplete="off" maxlength="2" value="0" onKeyPress="validate_numeric(event)"/>
<input type="hidden" class="pack" id="pack04-name" name="pack04-name" value="Pack 4" />
<input type="hidden" class="pack" id="pack04-price" name="pack04-price" value="8.00" />
</form>

CSS

.submitorder 
{
display:none;   
}
input[type="submit"]{
	border: thin solid #333; 
}

JavaScript

var orderTotal = 0;
var orders = [];
$(".pack").keyup(function () {
    var curId = this.id.split("k")[1];
    var packName = $('#pack' + curId + '-name').val();
    var packPrice = $('#pack' + curId + '-price').val();
	var packUnit = $(this).val();
	var packTotal = packUnit * packPrice;
    

   console.log(orders[curId])
      
 
    console.log('packName : ' + packName);
    console.log('packPrice : ' + packPrice);
    console.log('packUnit : ' + packUnit);
    console.log('packTotal : ' + packTotal);
    
	orderTotal = orderTotal + packTotal;
    console.log('orderTotal : ' + orderTotal);
	
	var order = null;	
	order = GetOrder(curId);
	
	if(order == null){
		order = {};
		order.id = curId;
		order.packPrice = packPrice;
		order.packUnit = packUnit;
		order.packTotal = packUnit * packPrice;
		orders.push(order);
	}
	else{
		order.packPrice = packPrice;
		order.packUnit = packUnit;
		order.packTotal = packUnit * packPrice;		
		UpdateOrders(order);
	}
	
	console.log(orders);
    
     if ($(this).val() == '' || $(this).val() == '0' ) {
         $("#packcontent_" + curId).hide();        
	}
    else 
    {
        $("#packcontent_" + curId).data('packtotal', packTotal);
        $("#packcontent_" + curId).html('Units : ' + packUnit + ', Name :  ' + packName + ', Price : ' + packPrice + ', Total : ' + packTotal);
	 	$("#packcontent_" + curId).show();      
    }
    
    CalculateTotal();
    
});

function GetOrder(curId){
	var order = null;

	for(i = 0; i< orders.length; i++){
		if(orders[i].id == curId){
			order = orders[i];
			break;
		}
	}
	
	return order;
}

function UpdateOrders(order){
	for(i = 0; i< orders.length; i++){
		if(orders[i].id == order.id){
			orders[i] = order;
			break;
		}
	}	
}

function CalculateTotal(){
``
	for(i = 0; i< orders.length; i++){
		total = total + orders[i].packTotal;
	}
	console.log(total);
  
    if(total > 0){
		$("#order_total").html('Total Items:' + i + '<br>' + 'Order Subtotal: ' + total);
       ...