同じIDで複数のdivでプレビュー画像を表示したい

Question

プレビューを同じdivで、複数にしたいと考えています。ここに私のコードです。

これはhtmlです。

<div class="thumbnail"> 
      <div id="resim_view"> 
     <img class="image img-thumbnail" src="#" /> 
     </div> 
    <br /> 

<span class="upload-button-wrapper"> 
    <input class="upload-button" id="upload" type="file"/> 
    <label class="upload-label" for="upload"><i class="glyphicon glyphicon-open"></i> &nbsp;&nbsp;Resim Yükle</label> 
</span> 
     <div class="thumbnail"> 
      <div id="resim_view"> 
     <img class="image img-thumbnail" src="<?php echo base_url(); ?>icons/resim_yok.jpg" /> 
     </div> 
    <br /> 

<span class="upload-button-wrapper"> 
    <input class="upload-button" id="upload" type="file"/> 
    <label class="upload-label" for="upload"><i class="glyphicon glyphicon-open"></i> &nbsp;&nbsp;Resim Yükle</label> 
</span> 

     <div class="thumbnail"> 
      <div id="resim_view"> 
     <img class="image img-thumbnail" src="<?php echo base_url(); ?>icons/resim_yok.jpg" /> 
     </div> 
    <br /> 

<span class="upload-button-wrapper"> 
    <input class="upload-button" id="upload" type="file"/> 
    <label class="upload-label" for="upload"><i class="glyphicon glyphicon-open"></i> &nbsp;&nbsp;Resim Yükle</label> 
</span> 

これはjqueryのコードです：

$('.upload-button').change(function(evt){ 
var curElement = $(this).parent().parent().find('.image'), 
output = evt.this.parentNode; 
console.log(curElement); 
var reader = new FileReader(); 
reader.onload = function (e) { 
var div = document.createElement("div"); 
    // curElement.attr('src', e.target.result); 
    div.innerHTML = "<img class='image img-thumbnail' src='" + e.target.result + "'" + "/>"; 

output.insertBefore(div, null); 

}; 

reader.readAsDataURL(this.files[0]); 

}); 

が、私は道にしようとすると、それも私はそれが最初のdivで表示した画像を追加し、最初のdivでのみ動作します。とにかくdivごとにプレビューするには？

Answer 1

ID、文書内の必須ことユニーク。
これはHTML仕様の一部です。それはどのように動作するのかの一部です。 したがって、他のメカニズムを見つける必要があります。