How can I solve when Doing a Select can show me the selected data in an input?

Greetings to the community

I have a problem when selecting a product and it shows me the price in the input if someone from the community can help me I am working in a mysql database where the product table is

I leave the code thank you very much

pattern:

@Entity public class Product implements Serializable{

private static final long serialVersionUID = 1L;

@Id
@GeneratedValue(strategy=GenerationType.IDENTITY)
@Column(name = "idproducto", updatable = false, nullable = false,unique=true)
private Long idproducto;

@Column(name="nomproducto",nullable=false,length=40)
private String nomproducto;

@Temporal(TemporalType.DATE)
@DateTimeFormat(pattern="yyyy-MM-dd")
private Date fecharegistro;

@Column(name="precio_venta",precision=10,scale=2,columnDefinition="Decimal(10,2)")
private Double precioventa;

@Column(name="precio_compra",precision=10,scale=2,columnDefinition="Decimal(10,2)")
private Double preciocompra;

jstl

<div class="form-group row">
                            
                            <div class="col-md-2">
                                <select name="producto" id="producto"  required>
                                            <option value="-1">Seleccione Producto</option>
                                    <c:forEach items="${productos}" var="producto">
                                        <option value="${producto.idproducto}">${producto.nomproducto}</option>
                                    </c:forEach>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <input type="number" class="form-control" name="cantidad" id="cantidad" autofocus required/>
                            </div>
                                <div class="col-md-2">
                                <input type="number" class="form-control" name="pesobruto" id="pesobruto" onkeyup="restar();" autofocus required/>
                            </div>
                                <div class="col-md-1">
                                <input type="number" class="form-control" name="tara" id="tara" onkeyup="restar();" autofocus required/>
                            </div>
                            <div class="col-md-2">
                                <input type="number" class="form-control" name="pesoneto" id="pesoneto" disabled autofocus />
                            </div>
                                <div class="col-md-1">
                                <input type="text" pattern="\d*" class="form-control" name="preciocompra" id="preciocompra" value="${producto.preciocompra}"  required/>
                            </div>
                                <div class="col-md-2">
                                <input type="number" class="form-control" id="descuento" value="0" disabled  />
                            </div>
                        </div>
                        
                
                    <div class="form-group row">
                        
                            <div class="col-md-12 col-md-offset-2">
                                <div class="card">
                                    <div class="card-body ">
                                        
                                        <button type="submit" onclick="agregarFila();" class="btn btn-success float-right " >Agregar</button>
                                       
                                    </div>
                               
                            </div>
                        </div>
                    </div>

javascript function addRow(){

 let cantidad = document.getElementById('cantidad').value;
 let preciocompra = parseFloat(document.getElementById("preciocompra").value);
 let pesoneto = document.getElementById('pesoneto').value;
 let descuento = document.getElementById('descuento').value;
 let producto = document.getElementById('producto').options[document.getElementById('producto').selectedIndex].text;    

 
 
 
 
 let subtotal=Number.parseFloat((preciocompra*pesoneto)-descuento).toFixed(2);
    
 
let impuesto=Number.parseFloat(subtotal*0.19).toFixed(2);
    impuesto= document.getElementById('impuesto').value;
let total=Number.parseFloat(subtotal).toFixed(2)+Number.parseFloat(impuesto).toFixed(2);
    total= document.getElementById('total').value;

// let table = document.getElementsByTagName('table')[0];

    let table = document.getElementById('tabla2');
  let newRow = table.insertRow(table.rows.length);
  

  let cel1 = newRow.insertCell(0);
  let cel2 = newRow.insertCell(1);
  let cel3 = newRow.insertCell(2);
  let cel4 = newRow.insertCell(3);
  let cel5 = newRow.insertCell(4);
  let cel6 = newRow.insertCell(5);   
  let cel7= newRow.insertCell(6);
   
  
  cel1.innerHTML = producto;
  cel2.innerHTML = cantidad;
  cel3.innerHTML = preciocompra;
  cel4.innerHTML = pesoneto;
  cel5.innerHTML = descuento;
  cel6.innerHTML = subtotal;   
  
 

  
  cel7.innerHTML = "<input type='button' value='Eliminar' onclick='deleteRow(this)'><input type='button' value='Actualizar'>";  
   

  
  calcularSubtotal();
  //deleteRow(tabla2);

}