title: How to append special symbols to a textbox on click of respective button
body: <p>Unable to add symbols to the textbox on click of symbols present inside the popover using jquery.</p>
  
  <p>Onclick of edit symbol near textbox a popover containing symbol buttons appear.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>   &lt;div class="col-md-3 col-xs-9 col-sm-9"&gt;
      &lt;div class="input-group"&gt;
          &lt;input type="text" class="form-control" id="symboltext"&gt; 
              &lt;span class="input-group-btn"&gt;
               &lt;button class="btn btn-default" type="button" id="popbutton" data-placement="bottom" data-container="body"&gt;
           &lt;span class="glyphicon glyphicon-edit"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>var popupElement = '&lt;div class="btn-group" role="group"&gt;&lt;button class="btn btn-sm btn-default" id="regbtn"&gt;&lt;span class="glyphicon glyphicon-registration-mark"&gt;&lt;/button&gt;&lt;button class="btn btn-sm btn-default" id="copyrightbtn"&gt;&lt;span class="glyphicon glyphicon-copyright-mark"&gt;&lt;span&gt;&lt;/button&gt;&lt;button class="btn btn-sm btn-default" id="trademarkbtn"&gt;&lt;sup&gt;TM&lt;/sup&gt;&lt;/button&gt;&lt;/div&gt;';
  
  $('#popbutton').popover({
      animation: true,
      content: popupElement,
      html: true
  });
  
  $("#regbtn").click(function () {
      $("#symboltext").append("&amp;#174;");
  });
  
  $("#copyrightbtn").click(function () {
      $("#symboltext").append("&amp;#169;");
  });
  
  $("#trademarkbtn").click(function () {
      $("#symboltext").append("&amp;#8482;");
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/iamraviteja/9te4uk31/8/" rel="nofollow">Fiddle here</a></p>