JSFiddle - React, Tailwind, and code Playground

HTML

<form method="post" action="confirmapedido.php">
<table border="1" align="center">
<tr><!--Titulos de la tabla-->
<td>Cantidad</td>
<td>Producto</td>
<td>Precio Unitario</td>
<td>Total</td>
</tr>
    <tr>
<td>
<select name="cant-1" id="cant-1" onChange="actualizaPrecios(1);">
<option value="0">0</option> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
<option value="5">5</option> 
<option value="6">6</option> 
<option value="7">7</option> 
<option value="8">8</option> 
<option value="9">9</option> 
<option value="10">10</option> 
<option value="11">11</option> 
<option value="12">12</option> 
<option value="13">13</option> 
<option value="14">14</option> 
<option value="15">15</option> 
<option value="16">16</option> 
<option value="17">17</option> 
<option value="18">18</option> 
<option value="19">19</option> 
<option value="20">20</option> 
<option value="21">21</option> 
<option value="22">22</option> 
<option value="23">23</option> 
<option value="24">24</option> 
<option value="25">25</option> 
<option value="26">26</option> 
<option value="27">27</option> 
<option value="28">28</option> 
<option value="29">29</option> 
<option value="30">30</option> 
<option value="31">31</option> 
<option value="32">32</option> 
<option value="33">33</option> 
<option value="34">34</option> 
<option value="35">35</option> 
<option value="36">36</option> 
<option value="37">37</option> 
<option value="38">38</option> 
<option value="39">39</option> 
<option value="40">40</option> 
<option value="41">41</option> 
<option value="42">42</option> 
<option value="43">43</option> 
<option value="44">44</option> 
<option value="45">45</option> 
<option value="46">46</option> 
<option value="47">47</option> 
<option value="48">48</option> 
<option value="49">49</option> 
<option value="50">50</option> 
</select>
</td>
<td>Producto</td>
<td><input id="pu-1" type="text" /></td>
<td><input id="total-1"...

JavaScript

var precio1 = [];
var precio2 = [];
var precio3 = [];
var precio4 = [];

precio1[1]=1700;
precio2[1]=1600;
precio3[1]=1500;
precio4[1]=1450;

precio1[2]=1456;
precio2[2]=1999;
precio3[2]=1321;
precio4[2]=1789;
function actualizaPrecios(identificador){
    var precio = 0;
nomvar="cant-"+identificador;
//console.log(nomvar);
campo=document.getElementById(nomvar);
//console.log(campo);
cantidad=campo.options[campo.selectedIndex].value;
//console.log(cantidad);

if(cantidad<=5){
	precio=precio1[identificador];

}


preciounitario=precio;	
total=preciounitario * cantidad;
    console.log(total);
subtotal=document.getElementById('total-'+identificador);
    console.log(subtotal);
subtotal.value=total;
pu=document.getElementById('pu-'+identificador);
pu.value=preciounitario;
}