html - Multiple images on the page and showing success text from ajax under each image -

i have multiple images on page. every image has option "add favorites". everything work fine except message showing above image if image added or not favorites.

success/fail message showing on top above first image only. know must use unique id each image can't understand how exactly.

here html part show images.

echo ' <article class="main-post" id="'.$row['image_id'].'" >     <div class="article-top">         <hr />         <h1><a href="imagepreview.php?image_id='.$row['image_id'].'">'.$row['image_caption'].'</a></h1>         <div class="counters-line">            <div class="pull-left">               <span id="message_favorites"></span>            </div>            <div id="'.$row['image_id'].'" class="pull-right">                <div class="buttons-bar">                   <div class="buttons">                                                   <a href="javascript:;" class="bookmarked has-tooltip" data-title="add favorites" id="'.$row['image_id'].'"></a>                                                                 </div>                </div>            </div>         </div>         <div class="article-content">                                            <figure>                  <a href="imagepreview.php?id='.$row['image_id'].'"><img class="lazy" data-original="upload/'.$row['image_name'].'" alt="'.$row['image_name'].'"/></a>            </figure>         </div>      </div> </article>'; 

this snippet in loop , show images db. have added id="$row['image_id']" the` way each article has unique id.

the success message showing here

<div class="pull-left">     <span id="message_favorites"></span> </div> 

and ajax function

$(document).ready(function(){ $('.bookmarked', $('.buttons')).click(function(){     $.post('misc/add_favorites.php',      {          "image_id": $(this).attr('id'),     },     function(data){         if(data == 0){             $('#message_favorites').html('<div id="alertfadeout" style="color: green">added favorites!</div>');              $('#alertfadeout').fadeout(3000, function () {                 $('#alertfadeout').text('');              });          }         else {              $('#message_favorites').html('<div id="alertfadeout" style="color: green">it's in favorites!</div>');              $('#alertfadeout').fadeout(3000, function () {                 $('#alertfadeout').text('');              });          }      }); }); }); 

ajax part send data add_favorites.php save image id , user id db.

so how can show message on image clicked?

update ajax

    $(document).ready(function(){ $('.bookmarked', $('.buttons')).click(function(){     $.post('misc/add_favorites.php',      {          "image_id": $(this).attr('id'),     },     var classes = $(this).attr('class');        //fetch classes of clicked item (this string) //alert('the classes: '+classes);     var classarray = classes.split(' ');        //split string parts seperated "blank"     $.each(classarray, function(index, item){       // execute every subpart     //alert(index+' '+item);     if(index==2)            // since third (better: use regexp) subpart stores id-information...     {         //alert(item);             $('#message_favorites').html('<div id="alertfadeout" style="color: green">added favorites!</div>');              $('#alertfadeout').fadeout(3000, function () {                 $('#alertfadeout').text('');              });                 }         else {              $('#message_favorites').html('<div id="alertfadeout" style="color: green">it's in favorites!</div>');              $('#alertfadeout').fadeout(3000, function () {                 $('#alertfadeout').text('');              });          }         });          }); }); 

html

    echo ' <article class="main-post" id="'.$row['image_id'].'" >     <div class="article-top">         <hr />         <h1><a href="imagepreview.php?image_id='.$row['image_id'].'">'.$row['image_caption'].'</a></h1>         <div class="counters-line">            <div class="pull-left">               <div id="'.$row['image_id'].'"><span id="message_favorites"></span></div>            </div>            <div id="'.$row['image_id'].'" class="pull-right">                <div class="buttons-bar">                   <div class="buttons">                                                   <a href="javascript:;" class="bookmarked has-tooltip '.$row['image_id'].'" data-title="add favorites" id="'.$row['image_id'].'"></a>                                                                 </div>                </div>            </div>         </div>         <div class="article-content">                                            <figure>                  <a href="imagepreview.php?id='.$row['image_id'].'"><img class="lazy" data-original="upload/'.$row['image_name'].'" alt="'.$row['image_name'].'"/></a>            </figure>         </div>      </div> </article>'; 

one solution add id-number button (as class):

<a href="javascript:;" class="bookmarked has-tooltip '.$row['image_id'].'"     data-title="add favorites" id="'.$row['image_id'].'"> </a> 

then use context of ajax request , query attr() method list of classes of button (see http://api.jquery.com/jquery.ajax). split (see get class list element jquery) can extract id , use address correct object...

example: https://jsfiddle.net/ojk8kdg9/5/