title: How to reset the Jcrop plugin? I.e. How to allow changing the source of the target image?
body: <p>The application I'm working on allows users to add an unlimited number of images onto a viewport. With those images, a series of operations are allowed: <em>resize</em>, <em>drag</em>, <em>rotate</em>, and <em>crop</em>. For the cropping feature, I'm using the <em>Jcrop</em> plugin.</p>
  
  <p>When clicking on the control icon for cropping, a lightbox appears, that shows the selected image (the <code>&lt;img&gt;</code> element is one and the same, only the <code>src</code> attribute value changes each time) and allows the user to crop it. The event handler associated triggered when the <em>crop</em> icon is clicked is:</p>
  
  <pre><code>$(document).on("click", "div.cropper", function(){
  
              var ctrl = $(this),
                  ref = ctrl.attr("reference"),
                  obj = returnObj(objects,ref),
                  target = $("#crop-target")
                  crop_params = {};
  
              target.attr("src",obj.src);
              target.Jcrop({
                  onSelect: function(c){
                      crop_params = c;
                  }
              });
  });
  </code></pre>
  
  <p>Given the code above, the cropping works perfectly, but ONLY with the first image I try it on. When I click on the "cropper" icon for any other images after that, the first image is shown.</p>
  
  <p>How can I work around this problem?</p>
  
  <p>PS: I've searched through the already existing questions about Jcrop and couldn't find an answer to my particular problem.</p>