title: how to add multiple textbox by clicking add button in jsf
body: <p>i am getting a problem while i would lick to add new text field in jsf primefaces page . plz,anyone help me how it will do... the main problem is when i click on add button the whole page is refresh its ok, but the previous textbox is automatically remove and create a newone over the previous one. but i need Both.. for example while we attach file in gmail there shows all the files what ever we attach. i am attaching image i need like way..<img src="https://i.stack.imgur.com/MEWH1.jpg" alt="enter image description here"> </p>
  
  <pre><code>**.xhtml**
    &lt;h:form &gt;
  
          &lt;h:panelGrid border="0" columns="3" cellpadding="4" columnClasses="control-label"&gt;
  
              &lt;h:outputText value="Individual Email"/&gt;
              &lt;div&gt;   
              &lt;h:dataTable value="#{utilBean.addresses}" var="rec" binding="#{utilBean.data}"        id="addresses"&gt;
                  &lt;h:column&gt;
                      &lt;h:inputText id="address" value="#{rec.emailAddress}" binding="#{utilBean.address}"/&gt;
                  &lt;/h:column&gt;
                  &lt;h:column&gt;
                      &lt;h:commandButton id="delete" value="Delete" immediate="true" actionListener="#{utilBean.deleteAddress}"/&gt;
                  &lt;/h:column&gt;
              &lt;/h:dataTable&gt;
  
              &lt;h:commandButton id="add" value="Add Email Address" immediate="true"   actionListener="#{utilBean.addAddress}" /&gt;
              &lt;/div&gt;
              &lt;br/&gt;
  
        &lt;/h:panelGrid&gt;
  
  &lt;/h:form&gt;                   
  </code></pre>
  
  <p> </p>
  
  <pre><code>**utilBean.java**
  
   import java.util.ArrayList;
   import java.util.List;
  
   import javax.faces.bean.ManagedBean;
   import javax.faces.component.UIData;
   import javax.faces.component.UIInput;
   import javax.faces.context.FacesContext;
   import javax.faces.event.ActionEvent;
  
   @ManagedBean
   public class UtilBean{
  
   private UIData data=null;
   private UIInput address = null;
  
      private List&lt;Address&gt; addresses = new ArrayList&lt;Address&gt;();
  
    public void addAddress(ActionEvent event){
  
      addresses.add(new Address()); //add new textbox
      this.updateAddresses();
      FacesContext.getCurrentInstance().renderResponse();
      System.out.println("adress size:" + addresses.size());
    }
  
   public void deleteAddress(ActionEvent event){
      int index = data.getRowIndex();     
      this.updateAddresses();
      this.getAddresses().remove(index);
      FacesContext.getCurrentInstance().renderResponse();
   }
  
   public void updateAddresses(){ 
      List&lt;Address&gt; list = (ArrayList&lt;Address&gt;)data.getValue();
      for(int i =0;i&lt;data.getRowCount();i++){
          data.setRowIndex(i);
          list.get(i).setEmailAddress((String)getAddress().getSubmittedValue() );
      }
      data.setRowIndex(0);
       }
  
  
    //Getters and Setters metod
  
     public UIData getData() {
      return data;
      }
  
    public void setData(UIData data) {
      this.data = data;
    }
  
    public UIInput getAddress() {
      return address;
    }
  
    public void setAddress(UIInput address) {
      this.address = address;
    }
  
    public List&lt;Address&gt; getAddresses() {
      return addresses;
    }
  
    public void setAddresses(List&lt;Address&gt; addresses) {
      this.addresses = addresses;
    }
  
  }
  
   **Address.java**
  
   import java.io.Serializable;
  
  import javax.faces.bean.ManagedBean;
  
  @ManagedBean
  public class Address implements Serializable {
  
  private static final long serialVersionUID = 1L;
  
  private String emailAddress;
  
  //setter and getter method
  
  
   }
  </code></pre>
  
  <p>plz, anyone identify me where i have mistake.</p>