title: how to crop multiple images and how to run loop in jquery
body: <p>filepreview is working dynamically but the issue is that when I run loop in jQuery it's not working. I want <code>#filepreview1</code> is coming dynamically in a loop. Can anyone help me? Thanks in advance.</p>
  
  <pre><code>&lt;p&gt;&lt;img id="filePreview&lt;?php echo $i; ?&gt;" style="display:none;"/&gt;&lt;/p&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function(){
      //prepare instant image preview
      for(i=0;i&lt;=5;i++){
      var p = $("#filePreview"+i);
      $("#fileInput"+i).change(function(){
          //fadeOut or hide preview
          p.fadeOut();
  
          //prepare HTML5 FileReader
          var oFReader = new FileReader();
          oFReader.readAsDataURL(document.getElementById("fileInput"+i).files[0]);
  
          oFReader.onload = function (oFREvent) {
              p.attr('src', oFREvent.target.result).fadeIn();
          };
      });
  
      //implement imgAreaSelect plugin
      $('img#filePreview'+i).imgAreaSelect({
          // set crop ratio (optional)
          //aspectRatio: '2:1',
          onSelectEnd: updateCoords
      });
  }
  });
  </code></pre>