Issue selecting dynamically an img to change its source
<p>I'm trying to change the <code>src</code> of an <code>img</code> based on a HTML <code>file input</code>.</p>

<p>The markup is the following (please note that, for debug i set an id to the second image, the id is "test").</p>

<pre><code>  &lt;div class="row"&gt;
    &lt;div class="col-md-3"&gt;
      &lt;img class='thumb' src='../images/placeholder.jpg'&gt;
      &lt;div&gt;
        &lt;input type="file" class='file-input' /&gt;
        &lt;button class="btn btn-primary editbtn"&gt;EDIT&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-3"&gt;
      &lt;img id='test' class='thumb' src='../images/placeholder.jpg'&gt;
      &lt;div&gt;
        &lt;input type="file" class='file-input' /&gt;
        &lt;button class="btn btn-primary editbtn"&gt;EDIT&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-3"&gt;
      &lt;img class='thumb' src='../images/placeholder.jpg'&gt;
      &lt;div&gt;
        &lt;input type="file" class='file-input' /&gt;
        &lt;button class="btn btn-primary editbtn"&gt;EDIT&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-3"&gt;
      &lt;img class='thumb' src='../images/placeholder.jpg'&gt;
      &lt;div&gt;
        &lt;input type="file" class='file-input' /&gt;
        &lt;button class="btn btn-primary editbtn"&gt;EDIT&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
</code></pre>

<p>And this is the JavaScript code:</p>

<pre><code>$(".editbtn").click(function(){
  $(this).parent().find(".file-input").trigger("click");
});

$(".file-input").change(function(event){
  var selectedFile = event.target.files[0];
  var reader = new FileReader();

  var imgtag = document.getElementById("test");
  imgtag.title = selectedFile.name;

  reader.onload = function(event) {
    imgtag.src = event.target.result;
  };

  reader.readAsDataURL(selectedFile);
});
</code></pre>

<p>it works, but it has <code>var imgtag = document.getElementById("test");</code> and it does not works if I change that line for this one: <code>var imgtag = $(this).parent().parent().find(".thumb");</code> </p>

<p>Maybe that is not the optimal jquery selector, but I think is a correct selector.</p>

<p>What's wrong?</p>