JSFiddle - React, Tailwind, and code Playground

by bluey

HTML

<span class="epos_form_total_a_title">Total: &pound;</span>
<span id="till__totalpanel_table_0_price" class="epos_form_total_a_num">6.00</span>

  <hr />

  <table id="till__tablepanel_table_0" class="table epos-table-main-a tickettablepanel"
  style="display: table;">
    <thead class="epos_ticket_header">
      <tr>
        <td>#</td>

        <td>Item</td>

        <td>Qty.</td>

        <td>Unit Price</td>

        <td>Total</td>
      </tr>
    </thead>

    <tbody>
      <tr id="till__tablepanel_table_0_row_0">
        <td></td>
      </tr>

      <tr id="till__tablepanel_table_0_row_1">
        <td>1</td>

        <td>Coffee</td>

        <td><span id="till__tablepanel_table_0_row_1_price" class=
        "wrap quantity">1</span></td>

        <td>&pound;1.00</td>

        <td>&pound;<span class=
        "till__tablepanel_table_0_row__totalprice">1.00</span></td>
      </tr>

      <tr id="till__tablepanel_table_0_row_2">
        <td>2</td>

        <td>Coffee</td>

        <td><span id="till__tablepanel_table_0_row_2_price" class=
        "wrap quantity">1</span></td>

        <td>&pound;1.00</td>

        <td>&pound;<span class=
        "till__tablepanel_table_0_row__totalprice">1.00</span></td>
      </tr>

      <tr id="till__tablepanel_table_0_row_3">
        <td>3</td>

        <td>Coffee</td>

        <td><span id="till__tablepanel_table_0_row_3_price" class=
        "wrap quantity">1</span></td>

        <td>&pound;1.00</td>

        <td>&pound;<span class=
        "till__tablepanel_table_0_row__totalprice">1.00</span></td>
      </tr>

      <tr id="till__tablepanel_table_0_row_4">
        <td>4</td>

        <td>Coffee</td>

        <td><span id="till__tablepanel_table_0_row_4_price" class=
        "wrap quantity">1</span></td>

        <td>&pound;1.00</td>

        <td>&pound;<span class=
        "till__tablepanel_table_0_row__totalprice">1.00</span></td>
      </tr>

      <tr id="till__tablepanel_table_0_row_5">
        <td>5</td>

       ...

JavaScript

$("#void").click( function() {
    voidlast(); 
    
});

function mainTotalCalc() {
     var newtotal=0;
     if ($('.till__tablepanel_table_0_row__totalprice').length == 0) $('#till__totalpanel_table_0_price').html('0.00');
     $('.till__tablepanel_table_0_row__totalprice').each( function(i) {
	  console.log(i);
      var number = $(this).text();
      //alert(number)
      num = parseFloat(number);
	  //alert(num);
         
      newtotal += num;
      // alert(newtotal); //testing
	  
	  totalpriceDecimal = newtotal.toFixed(2);
      $('#till__totalpanel_table_0_price').html(totalpriceDecimal);
	  // alert(totalpriceDecimal);
       
	 });   
}


function voidlast() {
    var lastrowid = $( "#till__tablepanel_table_0 tr:last").attr("id");
	var idReference = lastrowid.substr(0, lastrowid.indexOf('row_')); //gets the beggining id refernces without number
	// alert(idReference); //testing
	var fullReference = idReference+"row_";
	// alert(fullReference); //testing
	var lastrowIDnum = lastrowid.substring(lastrowid.indexOf("row_") + 4); //take number for row by removing string contents
	lastrowIDnumInt = parseInt(lastrowIDnum); //turn string number into integer
	// alert(lastrowIDnumInt);
	
	if (lastrowIDnumInt > 0) {
		$( "#till__tablepanel_table_0 tr:last").remove();
		mainTotalCalc();
	}else {
		alert("You cannot remove an item that does not exist!");
	}
    
}