title: Multiple images on the page and showing success text from ajax under each image
body: <p>I have multiple images on the page. Every image has option "add to favorites". <strong>Everything work just fine except the message that is showing above image if image is added or not to favorites</strong>. </p>
  
  <p>Success/Fail message is showing on top above first image only. I know that I must use unique id for each image but I can't understand how exactly. </p>
  
  <p>Here is the HTML part where I show the images.</p>
  
  <pre><code>echo '
  &lt;article class="main-post" id="'.$row['image_id'].'" &gt;
      &lt;div class="article-top"&gt;
          &lt;hr /&gt;
          &lt;h1&gt;&lt;a href="imagePreview.php?image_id='.$row['image_id'].'"&gt;'.$row['image_caption'].'&lt;/a&gt;&lt;/h1&gt;
          &lt;div class="counters-line"&gt;
             &lt;div class="pull-left"&gt;
                &lt;span id="message_favorites"&gt;&lt;/span&gt;
             &lt;/div&gt;
             &lt;div id="'.$row['image_id'].'" class="pull-right"&gt;
                 &lt;div class="buttons-bar"&gt;
                    &lt;div class="buttons"&gt;                             
                       &lt;a href="javascript:;" class="bookmarked has-tooltip" data-title="Add to Favorites" id="'.$row['image_id'].'"&gt;&lt;/a&gt;                                              
                    &lt;/div&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="article-content"&gt;                                
             &lt;figure&gt;    
               &lt;a href="imagePreview.php?id='.$row['image_id'].'"&gt;&lt;img class="lazy" data-original="upload/'.$row['image_name'].'" alt="'.$row['image_name'].'"/&gt;&lt;/a&gt;
             &lt;/figure&gt;
          &lt;/div&gt;
       &lt;/div&gt;
  &lt;/article&gt;';
  </code></pre>
  
  <p>This snippet is in loop and show images from DB. I have added <code>id="$row['image_id']" to the</code>` so this way each article has now unique ID.</p>
  
  <p>The success message is showing here</p>
  
  <pre><code>&lt;div class="pull-left"&gt;
      &lt;span id="message_favorites"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is the ajax function</p>
  
  <pre><code>$(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('&lt;div id="alertFadeOut" style="color: green"&gt;Added to favorites!&lt;/div&gt;');
               $('#alertFadeOut').fadeOut(3000, function () {
                  $('#alertFadeOut').text('');
               }); 
          }
          else {
               $('#message_favorites').html('&lt;div id="alertFadeOut" style="color: green"&gt;It's already in favorites!&lt;/div&gt;');
               $('#alertFadeOut').fadeOut(3000, function () {
                  $('#alertFadeOut').text('');
               }); 
          }
       });
  });
  });
  </code></pre>
  
  <p>ajax part send data to <code>add_favorites.php</code> which save image id and user id into DB.</p>
  
  <p>So how exactly I can show this message on the image which is clicked?</p>
  
  <p>UPDATE
  Ajax</p>
  
  <pre><code>    $(document).ready(function(){
  $('.bookmarked', $('.buttons')).click(function(){
      $.post('misc/add_favorites.php', 
      { 
          "image_id": $(this).attr('id'),
      },
      var classes = $(this).attr('class');        //fetch all classes of the clicked item (this is a string)
  //alert('The classes: '+classes);
      var classarray = classes.split(' ');        //split the string into it parts seperated by "blank"
      $.each(classarray, function(index, item){       // execute this for every subpart
      //alert(index+' '+item);
      if(index==2)            // since the third (better: use regexp) subpart stores the id-information...
      {
          //alert(item);
              $('#message_favorites').html('&lt;div id="alertFadeOut" style="color: green"&gt;Added to favorites!&lt;/div&gt;');
               $('#alertFadeOut').fadeOut(3000, function () {
                  $('#alertFadeOut').text('');
               });            
      }
          else {
               $('#message_favorites').html('&lt;div id="alertFadeOut" style="color: green"&gt;It's already in favorites!&lt;/div&gt;');
               $('#alertFadeOut').fadeOut(3000, function () {
                  $('#alertFadeOut').text('');
               }); 
          }        
  });         
  });
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>    echo '
  &lt;article class="main-post" id="'.$row['image_id'].'" &gt;
      &lt;div class="article-top"&gt;
          &lt;hr /&gt;
          &lt;h1&gt;&lt;a href="imagePreview.php?image_id='.$row['image_id'].'"&gt;'.$row['image_caption'].'&lt;/a&gt;&lt;/h1&gt;
          &lt;div class="counters-line"&gt;
             &lt;div class="pull-left"&gt;
                &lt;div id="'.$row['image_id'].'"&gt;&lt;span id="message_favorites"&gt;&lt;/span&gt;&lt;/div&gt;
             &lt;/div&gt;
             &lt;div id="'.$row['image_id'].'" class="pull-right"&gt;
                 &lt;div class="buttons-bar"&gt;
                    &lt;div class="buttons"&gt;                             
                       &lt;a href="javascript:;" class="bookmarked has-tooltip '.$row['image_id'].'" data-title="Add to Favorites" id="'.$row['image_id'].'"&gt;&lt;/a&gt;                                              
                    &lt;/div&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="article-content"&gt;                                
             &lt;figure&gt;    
               &lt;a href="imagePreview.php?id='.$row['image_id'].'"&gt;&lt;img class="lazy" data-original="upload/'.$row['image_name'].'" alt="'.$row['image_name'].'"/&gt;&lt;/a&gt;
             &lt;/figure&gt;
          &lt;/div&gt;
       &lt;/div&gt;
  &lt;/article&gt;';
  </code></pre>