jquery ajax load more button with multiple instances -

how use code multiple times on same page?

im displaying data grabbed ajax , each 1 has own comment box "show more comments" button.

its if press "show more comments" button, each comment box updated - instead of 1 clicked.

i think i'll need modify jquery/ajax code:

$( document ).on( 'click', '.loadmore', function () {      $(this).text('loading...');      var ele = $(this).parent('li');       $.ajax({         url: 'loadmore.php',         type: 'post',         data: {           page:$(this).data('page'),         },         success: function(response){           if(response){             ele.hide();             $(".news_list").append(response);           }         }       }); }); 

html/php:

<div id="container"> <ul class="news_list"> <?php $query=mysql_query("select * `comments` order `id` asc limit 0 , $resultsperpage"); while($data=mysql_fetch_array($query)){ $title=$data['name']; $content=$data['comment']; echo "<li><h3>$title</h3><p>$content<p></li>"; } ?> <li class="loadbutton"><button class="loadmore" data-page="2">load more</button></li> </ul> </div> 

loadmore.php:

    <?php include('config.php'); ?>     <?php         if(isset($_post['page'])):         $paged=$_post['page'];         $sql="select * `comments`order `id` asc";         if($paged>0){                $page_limit=$resultsperpage*($paged-1);                $pagination_sql=" limit  $page_limit, $resultsperpage";                }         else{         $pagination_sql=" limit 0 , $resultsperpage";         }          $result=mysql_query($sql.$pagination_sql);          $num_rows = mysql_num_rows($result);         if($num_rows>0){         while($data=mysql_fetch_array($result)){         $title=$data['name'];         $content=$data['comment'];         echo "<li><h3>$title</h3><p>$content<p></li>";         }         }         if($num_rows == $resultsperpage){?>         <li class="loadbutton"><button class="loadmore" data-page="<?php echo  $paged+1 ;?>">load more</button></li>      <?php        }else{         echo   "<li class='loadbutton'><h3>no more feeds</h3></li>";  }   endif;    ?> 

any suggestions?

regards

for each instance, change classes of buttons , divs content displayed. such loa dmore button should have following classes

<li class="loadbutton1"><button class="loadmore1" data-page="2">load more</button></li>  <li class="loadbutton2"><button class="loadmore2" data-page="2">load more</button></li>  <li class="loadbutton3"><button class="loadmore3" data-page="2">load more</button></li>