title: Issue selecting dynamically an img to change its source
body: <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>