Facebook comments on a popup div

Question

i have a problem with facebook comments and displaying them on a popup div. The problem is they share same comments but i have different data-href. Here is my code:

$query_pag_data = "SELECT ID_Story,Story,Down,Up from Story LIMIT $startrow, $nr_evenimente_pagina";
$result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());
$msg = "";
echo'<div id="story"><div id="header_title"><h2>Love Lock Stories</h2>
<h3>Whats your story?</h3></div>';
while ($row = mysql_fetch_array($result_pag_data)) {
 echo'  
    <div class="story_container">   

<h1>test</h1><br>
<p>'.$row['Story'].'</p>    


 <p> <a href = "javascript:void(0)" onclick = "document.getElementById(\'light\').style.display=\'block\';document.getElementById(\'fade\').style.display=\'block\'">Click here for facebook comments</a></p>
        <div id="light" class="white_content"><div class="fb-comments" data-href="http://websoftit.ro/lackoflove/story.php?active=2&id='.$row['ID_Story'].'" data-numposts="3" data-width="400" data-colorscheme="light"></div> <a href = "javascript:void(0)" onclick = "document.getElementById(\'light\').style.display=\'none\';document.getElementById(\'fade\').style.display=\'none\'">Close</a></div>
        <div id="fade" class="black_overlay"></div>

    ';


echo'</div></div>';
}

Here is the link where i have the comments Link

Answer 1

You have the same id="light" on each of the pop ups, change this to a class and it should work. ids need to be distinct in the same document.

If you make it a class you'll need to use something like $(this).find('.light') or $(this).closest('.light') or reference it directly like $(this).parent().siblings('.light')