How to append file name in the row it belongs to?
<p>I have an application you can access [here][1]. When you open up the application, you will see an "Add" button on top, click this twice and you will see 2 table rows appear with each row containing it's own file input.</p>

<p>The problem is:  suppose you try to upload a file (a small file for quick upload) in the second row's file input. After you have uploaded a file, the name of the file which has been uploaded is appended into both the top row and the second row. This is incorrect, it should only append the file name in the second row only because you used the second row's file input to upload that file.</p>

<p>How can I append the file name within the same row as the file input used to upload the file?</p>

<p>Below is the code for the form which contains the file input:</p>

<pre><code> function insertQuestion(form) {  

  var $tbody = $('#qandatbl &gt; tbody'); 
  var $tr = $("&lt;tr class='optionAndAnswer' align='center'&gt;&lt;/tr&gt;");
  var $image = $("&lt;td class='image'&gt;&lt;/td&gt;"); 

    var $fileImage = $("&lt;form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='return imageClickHandler(this);' class='imageuploadform' &gt;" + 
    "Image File: &lt;input name='fileImage' type='file' class='fileImage' /&gt;&lt;/label&gt;&lt;br/&gt;&lt;label class='imagelbl'&gt;" + 
    "&lt;input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /&gt;&lt;/label&gt;" + 
    "&lt;label&gt;&lt;input type='button' name='imageClear' class='imageClear' value='Clear File'/&gt;&lt;/label&gt;" +
    "&lt;/p&gt;&lt;ul class='listImage' align='left'&gt;&lt;/ul&gt;" +
    "&lt;iframe class='upload_target' name='upload_target' src='#' style='width:0;height:0;border:0px;solid;#fff;'&gt;&lt;/iframe&gt;&lt;/form&gt;");

    $image.append($fileImage);

    $tr.append($image);  
    $tbody.append($tr);

    };
</code></pre>

<p>Below is the handler the form directs to when clicked:</p>

<pre><code> function imageClickHandler(imageuploadform){ 
      if(imageValidation(imageuploadform)){ 
          return startImageUpload(imageuploadform); 
      } 
      return false;
  }
</code></pre>

<p>Below is where the file uploading starts and stops:</p>

<pre><code>function startImageUpload(imageuploadform){

  $(imageuploadform).find('.imagef1_upload_process').css('visibility','visible');

      return true;
}


    function htmlEncode(value) { return $('&lt;div/&gt;').text(value).html(); }


    function stopImageUpload(success, imagefilename){

          var result = '';

          if (success == 1){
             result = '&lt;span class="msg"&gt;The file was uploaded successfully!&lt;/span&gt;&lt;br/&gt;&lt;br/&gt;';      
              $('.listImage').append('&lt;div&gt;' + htmlEncode(imagefilename) + '&lt;button type="button" class="deletefileimage"&gt;Delete&lt;/button&gt;&lt;br/&gt;&lt;hr/&gt;&lt;/div&gt;'); 
          }
          else {
             result = '&lt;span class="emsg"&gt;There was an error during file upload!&lt;/span&gt;&lt;br/&gt;&lt;br/&gt;';
          }

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

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

});

    return true;

    } 
</code></pre>

<p>CORRECT SOLUTION:</p>

<pre><code>     function imageClickHandler(imageuploadform){ 
          if(imageValidation(imageuploadform)){ 
 window.lastUploadImageIndex = $('.imageuploadform').index(imageuploadform); 
              return startImageUpload(imageuploadform); 
          } 
          return false;
      }

         $('.listImage').eq(window.lastUploadImageIndex).append('&lt;div&gt;' + htmlEncode(imagefilename) + '&lt;button type="button" class="deletefileimage"&gt;Delete&lt;/button&gt;&lt;br/&gt;&lt;hr/&gt;&lt;/div&gt;'); 
</code></pre>
