Question

I have a liking script that get ID from php and insert id to data base then the script shows the result by ID. I use same html code and same script for differents Ids but siledown result open on first div id instead of the ont that i click it:

HTML:

    <a href="javascript://" class="like" sta_id="1" username="{S_USERNAME}" title="Like">Like</a>
<div id="sn_likebox">
<span id="close"><a href="javascript://" class="close" title="Close This">X</a></span>
<div style="height:13px">
<div id="flash">Loading........</div>
</div>
<div id="sn_like_content">
</div>
</div>
<p>----------------------------------</p><div></div>
<p>-----------------------------------</p><div></div>
<a href="javascript://" class="like" sta_id="2" username="{S_USERNAME}" title="Like">Like</a>
<div id="sn_likebox">
<span id="close"><a href="javascript://" class="close" title="Close This">X</a></span>
<div style="height:13px">
<div id="flash">Loading........</div>
</div>
<div id="sn_like_content">
</div>
</div>

Script:

$(".like").click(function()
{
var sta_id=$(this).attr("sta_id");
var username=$(this).attr("username");
var dataString ='sta_id='+ sta_id + '&username='+ username;
$("#sn_likebox").slideDown("slow");

$("#flash").fadeIn("slow");


$.ajax({
type : "POST",
url : us_cfg.url,
data: dataString,    
cache: false,


success: function(html)
{
$("#flash").fadeOut("slow");
$("#sn_like_content").html(html);
}
});

});





$(".close").click(function()
{
$("#sn_likebox").slideUp("slow");
});

Demo:

http://jsfiddle.net/Ke5AB/112/

Answer 1

You cannot have two identical IDs on the same page. Use a different selector type (such as a class).