JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://lasdashboard.co.uk/BuildForm/JS/jquery.gform/jAutoCalc.js"></script>
<script src="https://lasdashboard.co.uk/BuildForm/JS/jquery.gform/jquery.dataDisplay.js"></script>
<script src="https://lasdashboard.co.uk/BuildForm/JS/jquery.dform/jquerypp.formParams.js"></script>
		<form name="cart">
			<table name="cart" id="table">
                <tbody>
				<tr class="line_items">
					<th>Item</th>
					<th>Qty</th>
					<th>Price</th>
					<th>&nbsp;</th>
					<th>Item Total</th>
				</tr>
				<tr class="line_items">
					<td>Stuff</td>
                    <td><input type="text" name="qty[0]" value="1"/></td>
                        <td><input type="text" name="price[0]" value="9.99"/></td>
					<td>&nbsp;</td>
                        <td data-Display="({item_total[1][0]}=='yes')-$this.css('background','blue');,({item_total[1][0]}<=0||(isNaN({item_total[1][0]})&&({item_total[1][0]}!=='yes')))-$this.css('background','#fff').hide();,({item_total[1][0]}>0&&{item_total[1][0]}<=10)-$this.show().css('background','#ececec');,({item_total[1][0]}>10)-$this.show().css('background','red');"><input type="text" name="item_total[1][0]" value="" jAutoCalc="{qty[0]} * {price[0]}"/></td>
				</tr>
				<tr class="line_items">
					<td>More Stuff</td>
                    <td><input type="text" name="qty[1]" value="2"/></td>
                        <td><input type="text" name="price[1]" value="12.50"/></td>
					<td>&nbsp;</td>
                        <td data-Display="!empty({price[1]}) && !empty({qty[1]})"><input type="text" name="item_total[1][1]" value="" jAutoCalc="{qty[1]} * {price[1]}"/></td>
				</tr>
				<tr class="line_items">
					<td>And More Stuff</td>
                    <td><input type="text" name="qty[2]" value="3"/></td>
                        <td><input type="text" name="price[2]" value="99.99"/></td>
					<td>&nbsp;</td>
                        <td><input type="text" name="item_total[1][2]" value="" jAutoCalc="{qty[2]} *...

JavaScript

$('form[name=cart]').jAutoCalc({keyEventsFire: true, decimalPlaces: 2,emptyAsZero:true}).dataDisplay();

$('#addrow').on("click", function(){
    var ind = $('#table tbody').children().length;
    $('form[name=cart]').jAutoCalc('destroy').dataDisplay('destroy');

    $('#table tbody').append('<tr class="line_items"><td>Stuff</td><td><input type="text" name="qty['+ind+']" value="1"></td><td><input type="text" name="price['+ind+']" value=""></td><td>&nbsp;</td><td data-Display="!empty({price['+ind+']}) && !empty({qty['+ind+']})"><input type="text" name="item_total[1]['+ind+']" value="" jAutoCalc="{qty['+ind+']} * {price['+ind+']}"></td></tr>');
    
    $('form[name=cart]').jAutoCalc({keyEventsFire: true, decimalPlaces: 2,emptyAsZero:true}).dataDisplay();
  
    return false;
});




$('#submitForm').on("click", function(){
var removeParts =  function(allels,hiddenels){
    var position;
    $.each(hiddenels, function(key, value){
       //only one level of each. Multi di result.
      if(typeof value == "object"){
          $.each(value, function(vkey, vvalue){
          if(typeof vvalue == "object"){              
                $.each(vvalue, function(svkey, svvalue){
                    if(typeof allels[key][vkey][svkey] != 'undefined'){
                       delete allels[key][vkey][svkey];                        
                    }
                });
           }else{
             if(typeof allels[key][vkey] != 'undefined'){
                 delete allels[key][vkey];                        
              }
           }              
          });
      }else{
         if(typeof allels[key] != 'undefined'){
            delete allels[key];                        
         }
      }
    });
    return allels;
}
    var hiddenels = $('[name]', 'form[name=cart]').find(':hidden').formParams();
    var allels = $('[name]', 'form[name=cart]').formParams();
var final = removeParts(allels, hiddenels);
    alert(JSON.stringify(final));
    
    return false;
});