How to destroy() specific element and re-initialize on clone using jQuery

Question

I have the following issiue:

Im using the slim image cropping plugin for my application, but have some issiues when cloning the the html and re-initialize the plugin.

I am destroying the object in order to get the plugin to work after i clone the new fields. Problem is that the choosen image are beeing deleted when i clone. Is there a better approach to this?

The html code:

<div class="row">
        <div class="col-md-5">
            <div class="clone">
                <div class="row fieldset-content">
                    <div class="col-md-12">
                        <br>
                        <div class="form-group">
                            <input class="slim" type="file" name="slim[]" />
                        </div>  
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
            <button class="add_field_button btn btn-warning">+ Add more fields</button>
            <button type="submit" class="btn btn-success" name="submit-normal">Save changes</button>
        </div>
    </div>

The jquery code:

<script>
    $(document).ready(function() {  
        var options = {
            ratio: '4:3',
            label: 'Drop me here.',
            instantEdit:true,
            jpegCompression:true,
            size:{ 
                width: 640,
                height: 480,
            }
        }
        var cropper = $('.slim').slim(options);

         $(document).on('click', '.add_field_button', function (e) {
            e.preventDefault();
            //destroy in order to get it working after clone
            cropper.slim('destroy');

            $('.fieldset-content').first().clone().appendTo('.clone');
            $('.fieldset-content').first().find('.name').val('');

            var rmvBtn = $('.fieldset-content').last().find('.remove-button');
            //new instance
            $('.slim').slim(options);
        });
    });
</script>