How to fill several input fields with data coming from the database?

I have a problem with my system, I have already registered several devices on my system, but each device has a list of ports.

How do I dynamically generate inputs according to the number of ports registered in the database?

  

Example: X equipment has 5 ports, this screen dynamically generates the 5 input fields with the 5 port descriptions from the database, so the user can have the option to edit this information. Home   As I'm doing, it's only generating a field with an array of values.

<inputtype="hidden" name="patchpanel.id" value="${p?.id}" />
<label>Portas:</label> 
    <input type="text" name="patchpanel.portas.descricao" 
           class="form-control"
           value="${flash['patchpanel.portas.descricao'] 
                    ? flash['patchpanel.portas.descricao'] 
                    : p?.portas.descricao}" />

My model patchpanel

@Entity
public class Patchpanel extends Model {

@Required 
public String nome; 
@Required 
public String mac; 
@Required 
@IPv4Address 
public String ip; 
@Required 
public String numPortas; 

@OneToMany(
    cascade={CascadeType.PERSIST, CascadeType.MERGE}, 
    mappedBy="patchpanel") 
public List<Porta> portas; 

@ManyToOne 
@JoinColumn(name="torre_id") 
public Torre torre; 

@Enumerated(EnumType.STRING) 
public Status status; 

My ports model:

@Entity
public class Porta extends Model {

@Required
public String descricao;

@Enumerated(EnumType.STRING)
public Status status;

@Enumerated(EnumType.STRING)
public StatusEquipamento statusEquipamento;

I think it would be using jquery, but I do not know how to implement it because I do not yet have that language.