JSFiddle - React, Tailwind, and code Playground

HTML

<form method="post">

		 <table id="table-data">
	   <thead>
		   <tr> 
			   <th class="primera 10porcien">Nombre</th>
			   <th class="centro_listados 10porcien">cantidad</th>
			   <th class="centro_listados 10porcien">precio</th>
			   <th class="centro_listados 10porcien">Total</th>
			   <th class="ultima 10porcien">Opciones</th>
			</tr>
		</thead>
		
		<tbody id="itemRows" class="ordenable" style="background: white;">
	<tr>
		<td><input type="text" name="nombre" placeholder="Nombre"></td>
		<td><input type="text" name="cantidad" id="cantidad" placeholder="Cantidad"></td>
		<td><input type="text" name="precio" id="precio" placeholder="precio" value="100"></td>
		<td><input type="text" name="total" disabled id="total" placeholder="Total"></td>
		<td><input onclick="AddLinea(this.form);" type="button" class="botonverde" value="agregar" /></td>
	</tr>
		</tbody>
		 </table>
	</form>
</div>
<br />
            <div id="Totales">
                Subtotal <input type="text" name="Subtotal" placeholder="Subtotal"><br />
                Impuestos <input type="text" name="Impuestos" placeholder="Impuestos"><br />
                Total <input type="text" name="Supertotal" placeholder="Total">
             </div>            
<script>   
var LineaNum = 0;
function AddLinea(frm) {
	LineaNum ++;
	var Linea = '<tr id="LineaNum'+LineaNum+'"><td><b>'+frm.nombre.value+'</b></td><td><b>'+frm.cantidad.value+'</b></td><td><b>'+frm.precio.value+'</b></td><td><input type="text" name="total[]" disabled value="'+frm.total.value+'"></td><td><input type="button" class="botonrojo" value="Borrar" onclick="EliminarLinea('+LineaNum+');"></td></tr>';
	jQuery('#itemRows').append(Linea);
	frm.nombre.value = '';
	frm.cantidad.value = '';
	frm.precio.value = '';
	frm.total.value = '';
}


function EliminarLinea(rnum) {
	jQuery('#LineaNum'+rnum).remove();
	    this.updateSalesTax();
            this.updateTotal();
}
</script>

JavaScript

$(document).ready(function() {    
//suma totales
        $("#cantidad, #precio").change(function (e) {
            var canti = $("#cantidad").val();
            var preci = $("#precio").val();
            var iva = $("#iva").val();
            //var resultado = parseFloat(mat) + parseFloat(price);
            var baseimpo = parseFloat(canti) * parseFloat(preci);
            $("#total").val(baseimpo);
        });

//ordenable  	
 	$( ".ordenable" ).sortable({
        stop: function () {
            var inputs = $('input.posicion');
            var nbElems = inputs.length;
            $('input.posicion').each(function(idx) {
                $(this).val(nbElems - idx);
            });
        }
    });
    $( ".ordenable" ).disableSelection();   
          
});