Popover jquery content with ajax php

Let say if you have a user listing Or any kind of dynamic listing which is displaying information from database like mysql etc.. , so some time we want information of each users or product to display over a jQuery Popover with tab based. When popover will open it shows tab based information so that more information can be displayed over it.Below is the html link where user can click to get information.

Basically i had a loop of listing where i have to show up jquery popover with tab based so, when user click on button , viewSearchPayer function call and has one argument which can be userid or any thing. You can also take any unique ids or your data array element which is comming unique in Array. popoverId is important so that we can easily destroy or close the popover.

Response from your server side script like PHP etc will be html of tab ul li with user information or as per your requirements you can set accordingly.

<a class='btn btn-xs btn-warning' onclick='viewSearchPayer('EENPS9');'>gtInfo</a>

Below is the javascript function which is called when user click on button which have onclick event.

function viewSearchPayer(id) {
var popoverId = 'clientinfo_' + id;
var elem='Information 
<button type="button" onclick="closePop('+id+')" id="close" class="close">×<button>';
    $.ajax({
        type: 'POST',
        url: 'your_url_here',
        data: {"method": "viewSearchPayer", "id": id},
        dataType: 'json',
        async: true,
        success: function (response) {
            var Result;
            if (response.RESULT == 'SUCCESS') {
                Result = response.data;
            } else {
                Result = response.data;
            }
            $("."+popoverId).popover({
                container: 'body',
                placement: 'top',
                html: true,
                title: elem,
                content: Result
            }).popover('show');
        }
    });
}

Below is the javascript function which is called when user click on close button over popover so that we can close it. popoverId should be unique or you can adjust it according to your need.

function closePop(popoverId) {
     var closepopoverId = 'clientinfo_' + popoverId;
     $("."+closepopoverId).popover('hide');
  }

Below is the simple tab based html markup which you can revert back from your server side language like PHP , In this tab based you can also get dynamic data and display accordingly from database to these tabs.

 <ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Info</a></li>
<li class="tab"><a href="#tab2" data-toggle="tab">Track</a></li>
</ul><div class="tab-content">
<div class="tab-pane active" id="tab1"> 
tab1</div>
<div class="tab-pane" id="tab2">
tab2</div></div>