Multiple Preview images diffrent height and width using cropit

Multiple Preview images diffrent height and width using cropit

Crop and resize images is a common issue build cms, so i found great plugin  here  that plugin working well in desktop and mobile touch screen but i have last issue in my project how can i make multiple preview in this page !

already look at the issue there and found someone post same like me issue, so i digging on here but not working, issue here

then i checked jquery.cropit.js line 927 has class cropit-image-preview means will load images, so i make 

  1.  <form action="#"> <div class="image-editor"> <input type="file" class="cropit-image-input"> <div class="cropit-image-preview"></div> <div class="image-size-label"> Resize image </div> <input type="range" class="cropit-image-zoom-input"> <input type="hidden" name="image-data" class="hidden-image-data" /> <button type="submit">Submit</button> </div> <!--diffrent class with cropit-image-preview with diffrent height and width--> <div class="image-editor-test"> <input type="file" class="cropit-image-input"> <div class="cropit-image-preview-test"></div> <div class="image-size-label"> Resize image </div> <input type="range" class="cropit-image-zoom-input"> <input type="hidden" name="image-data" class="hidden-image-data" /> <button type="submit">Submit</button> </div> </form>

Then i copy the jquery.cropit.js and rename it and also change line 927 become  cropit-image-preview-test  and also the css is here 
  1. .cropit-image-preview { background-color: #f8f8f8; background-size: cover; border: 1px solid #ccc; border-radius: 3px; margin-top: 7px; width: 250px; height: 250px; cursor: move; } .cropit-image-preview-test { background-color: #f8f8f8; background-size: cover; border: 1px solid #ccc; border-radius: 3px; margin-top: 7px; width: 300px; height: 300px; cursor: move; }
and this is my js 
  1. $(function() { $('.image-editor').cropit(); $('form').submit(function() { var imageData = $('.image-editor').cropit('export'); $('.hidden-image-data').val(imageData); var formValue = $(this).serialize(); $('#result-data').text(formValue); return false; }); <!--test preview image--> $('.image-editor-test').cropit(); $('form#test').submit(function() { var imageData = $('.image-editor-test').cropit('export'); $('.hidden-image-data-test').val(imageData); var formValue = $(this).serialize(); $('#result-data-test').text(formValue); return false; }); });
to be honest this came from demo  here  and  issue  but the author nothing respond and someone already post in stackoverflow but nothing clear explation, Thanks for any comment