title: Cannot Generate emoji picker for dynamically generated form
body: <p>I have text-field and button. When the button is clicked, it should generate the text-field with emoji picker enabled. I can see the button but the emoji picker is not getting enabled.</p>
  
  <p>My code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
    &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"&gt;
      &lt;script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery.emojiFace.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;form class="col-sm-12"&gt;
  
        &lt;div id="textfields"&gt;
          &lt;div id="entireText0"&gt;
            &lt;div class="form-row"&gt;
              &lt;div class="col-sm-10"&gt;
                &lt;div class="form-group"&gt;
                  &lt;label for="textarea0"&gt;Question 1&lt;/label&gt;
                  &lt;!--&lt;textarea class="form-control" id="textarea0" rows="2"&gt;&lt;/textarea&gt;--&gt;
                  &lt;div class="containers"&gt;
                    &lt;textarea rows="3" id="textarea0" class="form-control faceText" spellcheck="false"&gt;&lt;/textarea&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;br&gt;&lt;br&gt;
        &lt;button type="button" id="button0" class="btn btn-primary" onclick="addTextFields();"&gt;Add Questions&lt;/button&gt;
      &lt;/form&gt;
  
  
      &lt;script&gt;
        $(function() {
          $('.faceText').emojiInit({
            fontSize: 20,
            success: function(data) {},
            error: function(data, msg) {}
          });
        });
  
        textareaid = 0;
        addButtonid = 0;
  
        function addTextFields() {
          textareaid++;
          addButtonid++;
          var objTo = document.getElementById('textfields');
          var divtest = document.createElement("div");
          divtest.innerHTML = "&lt;div id='textfields'&gt;&lt;div id='entireText" + addButtonid + "'&gt; &lt;div class='form-row'&gt; &lt;div class='col-sm-10'&gt; &lt;div class='form-group'&gt; &lt;label for='textarea" + addButtonid + "'&gt;Question " + (addButtonid + 1) + "&lt;/label&gt; &lt;div class='containers'&gt;&lt;textarea rows='3' id='textarea" + addButtonid + "' class='form-control faceText' spellcheck='false'&gt;&lt;/textarea&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;";
          objTo.appendChild(divtest);
          $('.faceText').emojiInit();
        }
  
      &lt;/script&gt;
  
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>EmojiPicker code(jquery.emojiFace.js):</p>
  
  <pre><code>var option;
  (function(c) {
    var d = "&amp;#402 &amp;#913 &amp;#914 &amp;#915 &amp;#916 &amp;#917 &amp;#918 &amp;#919 &amp;#920 &amp;#921 &amp;#922 &amp;#923 &amp;#924 &amp;#925 &amp;#926 &amp;#927 &amp;#928 &amp;#929 &amp;#931 &amp;#932 &amp;#933 &amp;#934 &amp;#935 &amp;#936 &amp;#937 &amp;#945 &amp;#946 &amp;#947 &amp;#948 &amp;#949 &amp;#950 &amp;#951 &amp;#952 &amp;#953 &amp;#954 &amp;#955 &amp;#956 &amp;#957 &amp;#958 &amp;#959 &amp;#960 &amp;#961 &amp;#962 &amp;#963 &amp;#964 &amp;#965 &amp;#966 &amp;#967 &amp;#968 &amp;#969 &amp;#977 &amp;#978 &amp;#982 &amp;#8226 &amp;#8230 &amp;#8242 &amp;#8243 &amp;#8254 &amp;#8260 &amp;#8472 &amp;#8465 &amp;#8476 &amp;#8482 &amp;#8501 &amp;#8592 &amp;#8594 &amp;#8595 &amp;#8596 &amp;#8629 &amp;#8656 &amp;#8657 &amp;#8658 &amp;#8659 &amp;#8660 &amp;#8704 &amp;#8706 &amp;#8707 &amp;#8709 &amp;#8711 &amp;#8712 &amp;#8713 &amp;#8715 &amp;#8719 &amp;#8721 &amp;#8722 &amp;#8727 &amp;#8730 &amp;#8733 &amp;#8734 &amp;#8736 &amp;#8743 &amp;#8744 &amp;#8745 &amp;#8746 &amp;#8747 &amp;#8756 &amp;#8764 &amp;#8773 &amp;#8776 &amp;#8800 &amp;#8801 &amp;#8804 &amp;#8805 &amp;#8834 &amp;#8835 &amp;#8836 &amp;#8838 &amp;#8839 &amp;#8853 &amp;#8855 &amp;#8869 &amp;#8901 &amp;#8968 &amp;#8969 &amp;#8970 &amp;#8971 &amp;#9001 &amp;#9002 &amp;#9674 &amp;#9824 &amp;#9827 &amp;#9829 &amp;#9830".split(" ");
    c.fn.emojiInit = function(b) {
      option = c.extend({
        targetId: "",
        fontSize: 14,
        faceList: d,
        success: function(a) {},
        error: function(a, b) {}
      }, b);
      option.targetId = c(this).attr("id");
      b = c(this);
      if (void 0 == b || 0 &gt;= b.length) option.error(null, "target object is undefined");
      else {
        option.fontSize = 20 &lt; option.fontSize ? 20 : option.fontSize;
        option.fontSize = 14 &gt; option.fontSize ? 14 : option.fontSize;
        var a = "";
        option.faceList.forEach(function(b) {
          a += "&lt;div onclick='insertAtCaret(\"" + option.targetId + '","' + b + "\",this)' style='font: normal normal normal 14px/1 FontAwesome;cursor: pointer;padding:3px;font-size:" + option.fontSize + "px;width: 20px;display: inline-block;text-align:center;'&gt;" + b + "&lt;/div&gt;";
        });
        b.css("width", "100%");
        b.css("padding", "5px 30px 5px 5px");
        b.css("box-sizing", "border-box");
        b.css("resize", "vertical");
        b.parent().css("position", "relative");
        b.after("&lt;div id='faceEnter' onclick='showFaceBlock()' style='padding: 5px;position: absolute;right: 0;top: 0;cursor: pointer;font: normal normal normal 14px/1 FontAwesome;'&gt;+&lt;/div&gt;");
        b.after("&lt;div id='faceBlock' style='background:rgb(216, 216, 216);border-radius: 12px;display: none;position: absolute;border: 1px solid #e2e2e2;padding: 5px;right: -150px;top: 25px;width: 300px;'&gt;" + a + "&lt;/div&gt;");
        c(document).click(function() {
          c("#faceBlock").hide();
        });
        c("#faceBlock").click(function(a) {
          a.stopPropagation();
        });
        c("#faceEnter").click(function(a) {
          a.stopPropagation();
        })
      }
    }
  })(jQuery);
  
  function showFaceBlock() {
    $("#faceBlock").show();
  }
  
  function insertAtCaret(c, d, b) {
    try {
      $("#faceBlock").hide();
      var a = $("#" + c).get(0);
      if (document.all &amp;&amp; a.createTextRange &amp;&amp; a.caretPos) {
        var e = a.caretPos;
        e.text = "" == e.text.charAt(e.text.length - 1) ? d + "" : d;
      } else if (a.setSelectionRange) {
        var f = a.selectionStart,
          h = a.selectionEnd,
          k = a.value.substring(0, f),
          l = a.value.substring(h);
        a.value = k + d + l;
        a.focus();
        var g = d.length;
        a.setSelectionRange(f + g, f + g);
        a.blur();
      } else a.value += d;
      option.success(b);
    } catch (m) {
      option.error(b, m);
    }
  };
  </code></pre>
  
  <p>I am using this emoji picker:</p>
  
  <p><a href="https://www.jqueryscript.net/text/Unicode-Emoji-Picker-jQuery-emojiFace.html" rel="nofollow noreferrer">https://www.jqueryscript.net/text/Unicode-Emoji-Picker-jQuery-emojiFace.html</a></p>
  
  <p>I can enable the emojipicker for first text-area. But, cannot do it when the text-area is dynamically generated. For instance, "Question 2" text-area is dynamically generated one.</p>
  
  <p>Now, I can see something like this.
  <a href="https://i.stack.imgur.com/UoONT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UoONT.png" alt="enter image description here"></a></p>