preview images before upload it

preview images before upload it

hi, i have preview images before upload is works great in jquery see the code ...

and in the form i have two different images and add type=file in each images and hide, so meaning that when click on the image it will prompt the upload form, however, when i clicked on first images under (id= "images_1") and replace with other images and see the preview image is works fine, but in second images (id=" images_2") when i clicked to replace images, it does not replace in second images but it replaced first images. 

how can i write the code in jquery to allow me to upload images  and preview image on each image when i click on each image!


function readURL(input) {
           if (input.files && input.files[0]) {
               var reader = new FileReader();
               reader.onload = function(e) {
                   $('#previewHolder').attr('src', e.target.result);
                 }
               reader.readAsDataURL(input.files[0]);
           }
       }
       $("#images_1").change(function() {
           readURL(this);
       });
  
});


form ...

<td width="29%" height="100" align="center" valign="middle">  
          <?php echo '<div width="36%"  align="center"> 
 
    <img class="product" id="previewHolder" src="' . GW_UPLOADPATH . '/' .  $images_1 .'" width="100" height="100" /> 
    <input type="file"
class="uploads" 
id="images_1" 
name="images_1">
  <button >Upload</button>
    </td>';
?>
     </td>
            
      <td width="29%" height="100">
        <?php echo '<div width="36%"  align="center"> 
   <img class="product"  src="' . GW_UPLOADPATH . '/' .  $images_2 .'" width="100" height="100" id="previewHolder" />
<input type="file"
class="uploads"
id="images_2"
name="images_2">
  <button>Upload</button>
        </div> ';
?>
      </td>