It is only displaying delete message in second row only
<p>Below is the code where it is displaying the delete message '<code>$(".imagemsg" + counter).html(data);</code>'. But it is displaying the delete message after a file has been deleted in the second row only, this is incorrect, it should only be displayed in the row the file was deleted from.</p>

<p>For example, if the file was deleted from the 3rd row, the message should be displayed in the 3rd row, if file was deleted from 6th row, it should display delete message in 6th row and etc. But at the moment no matter which row the file is deleted from, only the second row displays the delete message.</p>

<pre><code>   var counter = 0;

function stopImageUpload(success, imagefilename){

      var result = '';
      counter++;

      if (success == 1){
         result = '&lt;span class="imagemsg'+counter+'"&gt;The file was uploaded successfully!&lt;/span&gt;&lt;br/&gt;&lt;br/&gt;';      
         $('.listImage').eq(window.lastUploadImageIndex).append('&lt;div&gt;' + htmlEncode(imagefilename) + '&lt;button type="button" class="deletefileimage" image_file_name="' + imagefilename + '"&gt;Remove&lt;/button&gt;&lt;br/&gt;&lt;hr/&gt;&lt;/div&gt;'); 
      }
      else {
         result = '&lt;span class="imageemsg"&gt;There was an error during file upload!&lt;/span&gt;&lt;br/&gt;&lt;br/&gt;';
      }


      $(".deletefileimage").on("click", function(event) {

         var image_file_name = $(this).attr('image_file_name');

    jQuery.ajax("deleteimage.php?imagefilename=" + image_file_name)
      .done(function(data) {
        $(".imagemsg" + counter).html(data);
       });

       $(this).parent().remove();

    });

      return true;   
}
</code></pre>

<p>The result variable is called here in the imageupload.php:</p>

<p>CALLBACK:</p>

<pre><code>  &lt;script language="javascript" type="text/javascript"&gt;window.top.stopImageUpload(&lt;?php echo $result ? 'true' : 'false'; ?&gt;, '&lt;?php echo $_FILES['fileImage']['name'] ?&gt;');&lt;/script&gt;
</code></pre>
