JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://deepliquid.com/projects/Jcrop/css/jquery.Jcrop.css">
<script src="http://deepliquid.com/projects/Jcrop/js/jquery.Jcrop.js"></script>
<img id="cropBox" src="http://farm5.static.flickr.com/4034/4580633003_e62e061b64_d.jpg" />

<input id="button" type="button" value="submit" />

JavaScript

$(document).ready(function(){
    
    var one = "http://farm5.static.flickr.com/4034/4580633003_e62e061b64_d.jpg";
    var two = "http://farm5.static.flickr.com/4060/4580650483_7881505c66_d.jpg";
    var three = "http://farm5.static.flickr.com/4034/4581278976_0c91bc0f6f_d.jpg";
    
    // api needs to be defined globally so it can be accessed from the setTimeout function
    $.globalEval("var api;"); 
    
    // Also need to define your showPreview globally.
    $.globalEval("function showPreview(){ alert('Changed'); }");
    
    function setCrop()
    {
        // Need to pause a second or two to allow the image to load, otherwise the Jcrop plugin
        // will not update the image size correctly and if you change image size the picture 
        // will be stretched.
        // Change the 1000 to however many seconds you need to load the new image.
        setTimeout("api = $.Jcrop('#cropBox',{ aspectRatio: 1, onSelect: showPreview });",1000);
    }
    
    // Setup Jcrop for the original image
    setCrop();
    
    // Change the image and reset Jcrop
    $('#button').click(function(){
        api.destroy();
        var i = $('#cropBox').get(0).src = two;
        setCrop();
    });    
    
});