how to use same script for 2 ID on same page? - html

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:
Like
<div id="sn_likebox">
<span id="close">X</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>
Like
<div id="sn_likebox">
<span id="close">X</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 can't place two elements with the same ID in the DOM. You need to make them unique, then your code will work with them.

Answer 2

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