Get hidden input value and view in popovers JavaScript

Question

Did read data from hidden and view in a modal window - it worked. Changed from modal to popovers - stopped working. I do not know how to correct. Help please, tried a lot of things. http://jsfiddle.net/popovers

<div id="myPopoverContent">
    .....
    <span id="ip_view">no ip</span>
</div>

<a tabindex='0' class='btn  btn-danger' role='button' id='pop'  data-toggle='popover' data-trigger='focus'>                  
    Check
    <input id='ip_id' type='hidden' value='94.45.43.42'> 
</a>

<a tabindex='0' class='btn  btn-danger' role='button' id='pop'  data-toggle='popover' data-trigger='focus'>                  
    Check
    <input id='ip_id' type='hidden' value='83.218.164.204'> 
</a>            

<script type="text/javascript">
$(document).ready(function(){
       $('[data-toggle=popover]').popover({
        content: $('#myPopoverContent').html(),
        placement: 'bottom',
        html: true
    }).click(function() {
    var ip = this.firstElementChild.value;  
    document.getElementById('ip_view').innerHTML = ip; 
        $(this).popover('show');
    });
});

</script>

I do not understand why is not working. In modal or alert - work http://jsfiddle.net/modal

Answer 1

The content of the popup is set on create, so even though you update the value inside myPopoverContent, the content was set to the original html of the div when the document was ready (which is <span id="ip_view">no ip</span>). Here's a better and cleaner way of getting the content when the popup is opened.

Code

Fiddle

$('[data-toggle=popover]').popover({
    content: function(){return $(this).children("#ip_id").val();},
    placement: 'bottom'
});

Edit: Had the wrong fiddle link