Unable to render comment Plugin using jQuery

I've this markup. #popup has been styles with CSS to act as a modal pop-up

<div id="popup" style="display: none;"><div id="pop-con"></div></div>

<ul>
    <li data-uid="1" class="list">One</li>
    <li data-uid="2" class="list">Two</li>
    <li data-uid="3" class="list">Three</li>
</ul>

Now I've my jQuery scripts as

$('.list').live('click', function(){
    $('#pop-con').html('');
    var uid = $(this).data('uid');
    $('#popup').show('clip', { direction: 'horizontal' }, 100);
    $('#pop-con').load('proc/fb-comment.php?uid='+uid);
});

The fb-comment.php file is like

<div id="fb-root"></div>
<script>(function(d){
  var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<div class="fb-comments" 
     data-href="http://mydomain.com/?uid=<?php echo $_GET['uid']; ?>" 
     data-num-posts="2" 
     data-width="450"></div>

So the problem is, the comment plugin got rendered for which开发者_StackOverflow社区ever element I clicked the first, and for one time only (ie, if I click on the link again for a second time, it fails to get rendered)

If I clicked on list-item One, the comment box will appear for it; but if I clicked on the other list-items, no comment box is rendered.