Unable to add symbols to the textbox on click of symbols present inside the popover using jquery.

Onclick of edit symbol near textbox a popover containing symbol buttons appear.

**HTML**

```
   <div class="col-md-3 col-xs-9 col-sm-9">
    <div class="input-group">
        <input type="text" class="form-control" id="symboltext"> 
            <span class="input-group-btn">
             <button class="btn btn-default" type="button" id="popbutton" data-placement="bottom" data-container="body">
         <span class="glyphicon glyphicon-edit"></span>
        </button>
        </span>
    </div>
</div>

```

**JavaScript**

```
var popupElement = '<div class="btn-group" role="group"><button class="btn btn-sm btn-default" id="regbtn"><span class="glyphicon glyphicon-registration-mark"></button><button class="btn btn-sm btn-default" id="copyrightbtn"><span class="glyphicon glyphicon-copyright-mark"><span></button><button class="btn btn-sm btn-default" id="trademarkbtn"><sup>TM</sup></button></div>';

$('#popbutton').popover({
    animation: true,
    content: popupElement,
    html: true
});

$("#regbtn").click(function () {
    $("#symboltext").append("&#174;");
});

$("#copyrightbtn").click(function () {
    $("#symboltext").append("&#169;");
});

$("#trademarkbtn").click(function () {
    $("#symboltext").append("&#8482;");
});

```

[Fiddle here](http://jsfiddle.net/iamraviteja/9te4uk31/8/)