How to use Croppie in steps js or tab js? It dosn't work in steps js

Question

I need to use Croppie Js for upload and crop image in Steps Js. But it doesn't work. when I disabled Steps it works correctly. I dont know what is the problem. I test it in Bootstrap Modal too, but it doesn't work neither. Could you please check the code below and help me? this is my code and I hope someone can save me

 <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.js'></script>
  <script src='https://foliotek.github.io/Croppie/croppie.js'></script>
  <script>
   $(function ()
                {
                    $("#wizard").steps({
                        headerTag: "h2",
                        bodyTag: "section",
                        transitionEffect: "slideLeft"
                    });
                });
var $uploadCrop,
tempFilename,
rawImg,
imageId;
function readFile(input) {
 if (input.files && input.files[0]) {
  var reader = new FileReader();
  reader.onload = function (e) {
   $('.upload-demo').addClass('ready');
   $('#cropImagePop').modal('show');
   rawImg = e.target.result;
  };
  reader.readAsDataURL(input.files[0]);
 } else
 {
  swal("Sorry - you're browser doesn't support the FileReader API");
 }
}

$uploadCrop = $('#upload-demo').croppie({
 viewport: {
  width: 250,
  height: 250 },

 enforceBoundary: false,
 enableExif: true });

$('#cropImagePop').on('shown.bs.modal', function () {
 // alert('Shown pop');
 $uploadCrop.croppie('bind', {
  url: rawImg }).
 then(function () {
  console.log('jQuery bind complete');
 });
});

$('.item-img').on('change', function () {imageId = $(this).data('id');tempFilename = $(this).val();
 $('#cancelCropBtn').data('id', imageId);readFile(this);});
$('#cropImageBtn').on('click', function (ev) {
 $uploadCrop.croppie('result', {
  type: 'base64',
  format: 'jpeg',
  size: { width: 1000, height: 1000 } }).
 then(function (resp) {
  $('#item-img-output').attr('src', resp);
  $('#cropImagePop').modal('hide');
 });
});
//# sourceURL=pen.js
    </script>

 <link rel='stylesheet' href='https://foliotek.github.io/Croppie/croppie.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.4.0/css/bootstrap-rtl.css'>

  <div id="wizard">
   <h2>upload Image</h2>
                    <section>
                        <h3>Upload and crop your image</h3>



                        <div class="row">
                            <input type="file" name="" class="item-img" accept="image/*" />
                        </div>
                        <div class="row">
                            <h3>Result Image</h3>
                            <div class="image-output">
                                <img src="" alt="" id="item-img-output" />
                            </div>
                        </div>


                        <div id="cropImagePop" class="modal" tabindex="-1" role="dialog">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title">Crop Image</h4>
                                    </div>
                                    <div class="modal-body">
                                        <div class="col-xs-12 col-sm-4 col-sm-offset-4">
                                            <div style="display: block; width: 300px; height: 300px;">
                                                <div id="upload-demo"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                        <button type="button" id="cropImageBtn" class="btn btn-primary">Crop</button>
                                    </div>
                                </div><!-- /.modal-content -->
                            </div><!-- /.modal-dialog -->
                        </div>




                    </section>
  <h2>The other part</h2>
  <section>
  <p>Blah Blah Blah </p>
  </section>
</div>