jQuery sortable在Meteor模板中显示错误的数据值

Question

视频cap.html

<div class="caption-sort">
    {{#each captions}}
    <div class="box caption module-sm">

        <div class="{{captionClasses}}">

            {{#if equals @index 0}}
            <p style="font-weight: bold;">First 3 Seconds</p>
            {{/if}}

            <textarea name="caption" class="caption-text">{{ this.caption }}</textarea>

            <select name="clip" class="clip-select" data-placeholder="Clip">
                <option value="">None</option>
                {{#each ../sources}}
                <option {{ selected ../clip @index }} value="{{ @index }}">
                    {{ clipName this.nickname @index }}
                </option>
                {{/each}}
            </select>

            <input name="start" class="timestamp" value="{{ this.start }}"/>
            <input name="end" class="timestamp" value="{{ this.end }}"/>

            <a data-index="{{@index}}"><i class="icon icon-close"></i></a>

        </div>

    </div>
    {{/each}}
</div>

视频cap.js

var saveVideo = function(container){

    var captions = [];

    $('.caption').each(function(){

        var value = {
            'caption': $(this).find('.caption-text').val(),
            'clip': $(this).find('[name="clip"]').val(),
            'start': $(this).find('[name="start"]').val(),
            'end': $(this).find('[name="end"]').val(),
        };

        captions.push(value);

    });

    data.captions = captions;

    Meteor.call('updateArticle', the_id, data);
};

将jQuery UI的可排序应用于.caption-sort div后，数据在拖放项目后有时会在.captions上显示错误的顺序。我也尝试在each（）方法中使用console.log(data)，并且在删除后显示正确的值。但它没有以正确的顺序显示在模板上。猜猜，这是来自反应性的问题。我该如何解决这个问题？

演示：