JQuery bind on multiple same name ID - php

Question

I have one table generated by PHP
<div class="mailbox-list">
<ul>
<?php while ($row=$database->fetch_array($result)){?>
<li id="emal_new" name="<?php echo $row["id"];?>">
<a href="#" >
<div class="mail-checkbox">
<input class="filled-in" id="<?php echo $row["id"];?>" type="checkbox">
<label for="<?php echo $row["id"];?>"></label>
</div>
<h5 class="mail-author">VPN Access Manager</h5>
<h4 class="mail-title"><?php echo $row["naslov"]; ?></h4>
<p class="hide-on-small-and-down mail-text">
<?php $poruka_kratka = clear_mail($row['poruka']);
echo text($poruka_kratka,"75")?></p>
<div class="position-top-right p f-12 mail-date"><?php echo $row["datum"]; ?></div>
</a>
<div id ="user-result" />
</li>
<?php }?>
</ul>
</div>
And my JQCODE is:
<script>
$(document).ready(function() {
var x_timer;
$("#emal_new").bind('click', function (e){
clearTimeout(x_timer);
var email_id = $(this).attr("name");
x_timer = setTimeout(function(){
check_email_id_ajax(email_id);
}, 100);
});
function check_email_id_ajax(email_id){
$("#user-result").html('<img style="width: 24px; height:24px;" src="<?php echo WWW; echo 'includes/themes/'.THEME_NAME.'';?>/img/ajax.gif" />');
$.post('ajax/mailbox.php',{'email_id':email_id}, function(data) {
$("#user-result").html(data);
});
}
});
</script>
And i have about 30 and more data in table and only first at table works with that jquery bind? How can bind work on all objects?
I need when i click on some row in table call ajax for more information about that row called by name.
Thanks!

Answer 1

This is expected behaviors as Identifiers in HTML must be unique, Use a common class to bind event handlers, also I would recommend you to use data-* prefix custom attribute to store arbitary data, which can be accessed using .data()
Change the HTML as
<li class="emal_new" data-name="<?php echo $row["id"];?>">
<div class="user-result"></div>
</li>
Script
$(document).ready(function() {
var x_timer;
$(".emal_new").on('click', function(e) {
var email_id = $(this).data("name");
var userResult = $(this).find('.user-result')
if (x_timer)
clearTimeout(x_timer);
x_timer = setTimeout(function() {
check_email_id_ajax(email_id);
}, 100);
});
function check_email_id_ajax(userResult, email_id) {
userResult.html(TheHTML);
$.post('ajax/mailbox.php', {
'email_id': email_id
}, function(data) {
userResult.html(data);
});
}
});
Also not .bind() has been deprecated. It was superseded by the .on() method for attaching event handlers to a document since jQuery 1.7