Upload image and append it to body with JQuery
<p>I am trying to make a website builder wherein we have options to add HTML elements
like text, images, videos etc.
For uploading image through the device, I used </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {

  $("#addImage").click(function() {
    $("#fileinput").click();
  });

  $("#fileinput").click(function() {
    $("#fileinput").change(function() {
      if (this.files &amp;&amp; this.files[0]) {
        var reader = new FileReader();
        reader.onload = imageIsLoaded;
        reader.readAsDataURL(this.files[0]);
      }
    });
  });

  var x=0;
  function imageIsLoaded(e) {
    var picture = '&lt;img src="' + e.target.result + '" style="width:200px;height:200px;" class="' + x + 'thImage"&gt;'
    $("body").append(picture);
    x=x+1;
  }

});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
&lt;html&gt;

&lt;body&gt;
  &lt;input type="file" id="fileinput" style="height:0;overflow:hidden;"&gt;
  &lt;button id="addImage"&gt;Upload image&lt;/button&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>

 I linked the function to another button and hid the actual file input button so that it looks good.</p>

<p><b>This works fine only for the first time.The nth time I add an image, the image will be added n times.</b></p>

<p><b>Also, since I am adding images I need an alternate for change() since I may want to add the same image again and again.</b></p>

<p>Help me solve this.Thanks in advance.</p>