title: How to dynamically add Primefaces inputfields with JQuery
body: <p>I am trying to dynamically add Labels and textfields from Primefaces to my webpage.
  I want to use JQuery. Until now I realize the same task with Primefaces only and it works quite well but has some beahaviour I want to avoid. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
      &lt;html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:p="http://primefaces.org/ui"&gt;
  
   &lt;h:head&gt;
  &lt;script type="text/javascript"&gt;
  
        $(document).ready(function() {
           var counter = 2;   
  
           $("#addButton").click(function(){
  
          var newTextBoxDiv = $(document.createElement('div')).attr("id",'TextBoxDiv' + counter);
  
  
              &lt;!--
                 This line causes trouble. If I use it nothing is rendered on page. 
                 If I use &lt;h:inputText /&gt; the page is rendered but the functionality does
                 not work
              --&gt;
              newTextBoxDiv.html("&lt;p:inputText /&gt;"); 
          newTextBoxDiv.appendTo("#TextBoxesGroup");
          counter++;
           });
        });
     &lt;/script&gt;
  
  &lt;/h:head&gt;
  
  &lt;h:body&gt;
  
  &lt;ui:insert&gt;
      &lt;ui:include src="/protected/header.xhtml" /&gt;
  &lt;/ui:insert&gt;
  
  
  &lt;h:form&gt;
      &lt;div id="test"&gt;&lt;/div&gt;
      &lt;div id='TextBoxesGroup'&gt;&lt;/div&gt;
      &lt;input type='button' value='Add Button' id='addButton' /&gt;
      &lt;input type='button' value='Remove Button' id='removeButton' /&gt;
  &lt;/h:form&gt;
  &lt;/h:body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I would appreciate some hints on tutorials on the subject or if it is a simple error in my code. a solution for this prob. Thank you in advance :)</p>