Can't show an image before uploading

Question

This is my problem when im trying to change the image to my 2nd data it's not changing but when i tried the first data it's changing i don't know the reason why it's not working on the second data. Can someone help me with this?

Here is my form where the image and file is in.

Update here is the picture the news with id 42 when i change the image of that the image is not changing but with the news with id 40 it's changing.

Here is my whole code.

  $stmt = mysqli_prepare($con, "SELECT * FROM news ORDER BY news_id");
  mysqli_stmt_execute($stmt);
  $result = mysqli_stmt_get_result($stmt);
  while($row = mysqli_fetch_array($result)){
  ?>
   <tr>
  <td><?php echo $row['news_id']; ?></td>
  <td><?php echo $row['news_title']; ?></td>
  <td><?php echo $row['news_date']; ?></td>
  <td><?php echo $row['news_content']; ?></td>
  <td><img style="height:150px; width:200px;" src="<?php echo $row['news_image']; ?>"  ></td>
  <td>

  <button class="btn btn-info" data-toggle="modal" data-target="#newsedit<?php echo $row['news_id'];?>"><span class="glyphicon glyphicon-edit"></span>  Edit</button>
  <a class='btn btn-danger delete-object' data-toggle="modal" data-target="#newsdelete<?php echo $row['news_id'];?>"><span class="glyphicon glyphicon-remove"></span> Delete</a>

  <div class="modal fade" id="newsdelete<?php echo $row['news_id'];?>" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
              <div class="modal-content">
                    <div class="modal-body">
                       Are you sure you want to delete this?
                            </div>
     <div class="modal-footer">
      <a class='btn btn-danger left-margin' href="delete.php?newsid=<?php echo $row['news_id'];?>" >Yes</a>
    <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
          </div>
           </div>
          </div>
          </div>

     <div id="newsedit<?php echo $row['news_id'];?>" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
             <div class="modal-dialog">
                 <div class="modal-content"> 
                        <div class="modal-header">
                                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                    <h4 class="modal-title" id="myModalLabel">Edit events</h4>
                                  </div>

                                 <div class="modal-body edit-content">
                                    <form method="POST" enctype="multipart/form-data" action ="edit2.php?newsid=<?=$row['news_id']?>">
                                          <div class="form-group">
                                            <label for="title">News Title</label>
                                            <input type="text" name="titles" class="form-control title" id="title" placeholder="News Title" value="<?php echo $row['news_title']; ?>">
                                          </div>

                                          <div class="form-group">
                                             <label for="date">Date</label>
                                             <input type="text" name="dates" class="form-control date" id="date" placeholder="Date" value="<?php echo $row['news_date']; ?>"s>
                                         </div>

                                         <div class="form-group">
                                            <label for="content">News Content</label>
                                            <textarea class="form-control content" name="contents" rows="5" id="content"><?php echo $row['news_content']; ?></textarea>
                                         </div>


                                         <img id="blah" name="newsimages" src="<?php echo $row['news_image']; ?>" width="200px" height="140px"/>
                                            <input id="image" name="image" class="fileupload" type="file" accept="image/*"/>

                                 </div>

                               <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="submit" class='btn btn-info left-margin'>Yes</a>
                                  </form>
                            </div>
                              </div>
                        </div>
                   </div>


                </td>
            </tr>
        <?php
        }
        ?>

here is the js for showing the image before uploading.

<script type="text/javascript">
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#image").change(function(){
        readURL(this);
    });
    </script>

Answer 1

Use something like this:

function readURL(input) {
  if (input.files && input.files[0]) {
    var url = URL.createObjectURL(input.files[0]);

    $(input).siblings('img').attr('src', url);
  }
}

$(".fileupload").change(function() {
  readURL(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img name="newsimages" width="200px" height="140px"/>
<input name="image" class="fileupload" type="file" accept="image/*" />

Don't use duplicate ids in a document! This causes undefined behavior, and generally results in things not happening as expected. Easiest solution is to remove any ids in the HTML inside your PHP while loop.