title: Display emoji in a div using Emoji One Area
body: <p>I am working with Emoji One Area emoji picker.
  please check the fiddle :
  <a href="https://jsfiddle.net/ukLaz8cm/40/" rel="nofollow noreferrer">https://jsfiddle.net/ukLaz8cm/40/</a></p>
  
  <p>Its working fine.But in case of some emoji like Punch Tone1 and some other are not display properly on the display div &amp; got some box type symbol.how to display them properly. </p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="span6"&gt;
      &lt;textarea id="emojionearea1"&gt;&lt;/textarea&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;button id="click"&gt;preview&lt;/button&gt;
  &lt;div id="display"&gt;
  &lt;/div&gt;
  
  $(document).ready(function() {
      $("#emojionearea1").emojioneArea({
  
          pickerPosition: "right",
          tonesStyle: "bullet",
  
      });
  });
  
  $("#click").click(function(){
  text =  $("#emojionearea1").val();
  //alert(text);
  $("#display").html(text);
  })
  </code></pre>