jquery - jQueryを使用して特定の要素をdestroy()し、クローンで再初期化する方法

Question

次の問題があります。

アプリケーションにスリムな画像トリミングプラグインを使用していますが、html のクローンを作成してプラグインを再初期化するときに問題が発生します。

新しいフィールドを複製した後、プラグインを機能させるためにオブジェクトを破棄しています。問題は、クローンを作成するときに選択したイメージが削除されることです。これに対するより良いアプローチはありますか？

HTML コード:

<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>

jquery コード:

<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>