Add class Size to Product

I need to do something that when registering a product, make even a pizza have sizes and each size its price.

Then I created a Size class.

public class Tamanho implements Serializable {
@Id
@GeneratedValue
private Long idTamanho;
private String tamanho;
private Double valorTamanho;
private Long produto;

And I made her call into my Product class

@ManyToMany(cascade = CascadeType.ALL, fetch = FetchType.LAZY) 
private List<Tamanho> tamanhos;

Now hit the doubt as I will add in the registration screen for when the person clicks on adding a size the system generate a field for the user to enter a new size and thus to record.

I'm currently doing this:

<div class="modal" id="modal">                        
                <div class="modal-content" style="color: #000; input{background-color: yellow};">
                    <div class="row">
                        <div class="col s12">
                            <h3>Cadastro de Produtos</h3>
                        </div>
                        <div class="row">
                            <div class="input-field col s12">
                                <p:inputText type="hidden" hidden="hidden" id="id" value="#{produtoBean.prod.idProduto}"/>                                   
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s12">
                                <mp:input id="nome" label="Nome" value="#{produtoBean.prod.nomeProduto}"/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s12">
                                <mp:input id="desc"
                                          label="Descrição" value="#{produtoBean.prod.descricaoProduto}"/>
                            </div>
                        </div>                           
                        <div class="row">
                            <div class="input-field col s12">                                       
                                <mp:input id="valor" type="number" label="Valor" value="#{produtoBean.prod.valorProduto}">
                                    <f:convertNumber pattern="#,##0.00"></f:convertNumber> 
                                </mp:input>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s12">
                                <p>Categoria</p>
                                <h:panelGroup layout="block" styleClass="selection">
                                    <h:selectOneRadio layout="pageDirection" id="categoria" converter="categoriaConverter" label="Categoria" value="#{produtoBean.prod.categoriaProduto}">
                                        <f:selectItems 
                                            value="#{loginBean.pessoaAtual.categorias}"
                                            var="categoria" itemValue="#{categoria}"
                                            itemLabel="#{categoria.tituloCategoria}"/>
                                    </h:selectOneRadio>
                                </h:panelGroup>
                            </div>
                        </div>  
                        <div class="row">
                            <div class="input-field col s12">
                                <p>Ingredientes</p>
                                <h:panelGroup layout="block" styleClass="selection">
                                    <h:selectManyCheckbox 
                                        id="ingrediente"                                                           
                                        converter="ingredienteConverter"  
                                        label="Ingrediente"   
                                        layout="pageDirection"                                           
                                        value="#{produtoBean.prod.ingredientesProduto}">

                                        <f:selectItems 
                                            value="#{ingredienteBean.listarIngrediente()}"
                                            var="ingrediente" itemValue="#{ingrediente}"
                                            itemLabel="#{ingrediente.nomeIngrediente}"/>

                                    </h:selectManyCheckbox>
                                </h:panelGroup>
                            </div>
                        </div> 

                        <div class="row">
                            <div class="input-field col s12">
                                <p>Foto</p>
                                <div class="col s12 l6 m6">
                                    <mp:input hidden="hidden" type="hidden" id="imagemProduto" value="#{produtoBean.prod.imagemProduto}"></mp:input>
                                    <p:fileUpload id="upload" update="imagem, imagemProduto" label="Selecionar..." skinSimple="true" mode="advanced"
                                                  fileUploadListener="#{produtoBean.upload}" auto="true"></p:fileUpload>                                                     
                                </div>
                                <div class="col s12 l6 m6">
                                    <mp:image id="imagem" circle="true" width="150" height="150" value="../imagens/#{produtoBean.prod.imagemProduto}" />
                                </div>
                            </div>
                        </div> 
                        <div class="row" style="text-align: center;">
                            <div class="input-field col s12">                                        
                                <mp:button update=":form1:listaProduto" value="Salvar" action="#{produtoBean.salvar}"></mp:button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>