PowerCMSで入力欄セット追加UIを実現したい

前提・実現したいこと

PowerCMSの管理画面にて、
以下のURLに掲載されていた入力欄セット追加UIを実現したいのですが、
カスタムフィールドで登録した値をどう取り扱えばいいか悩んでいます。
https://www.powercms.jp/blog/2017/12/custom-interface.html

現在は管理画面に入力欄を追加したり消したりする表示を作成しましたが、
登録したカスタムフィールドの値の管理画面上での出力で行き詰っています。

入力欄は複数のカスタムフィールドを追加可能で、尚且つ順番を入れ替えることができます。
単純にカスタムフィールドの値をループして出力はできたのですが、
順番の入れ替えなどには対応できませんでした。

現在の構成は以下の通りです。

カスタム項目（blockeditor）

・カスタムフィールド（テキスト（複数行））で「編集画面用テンプレート」と「出力用テンプレート」を2つを登録
・「見出し」と「テキスト」を登録

見出し

・編集画面用テンプレート

<input type="text" name="<$mt:Var name="fb_name" key="txt"$>" class="text" value="<$mt:Var name="fb_value" key="txt" escape="html"$>">

・出力用テンプレート

<h1><$mt:Var name="fb_value" key="txt"$></h1>

テキスト

・編集画面用テンプレート

<textarea name="<$mt:Var name="fb_name" key="txtarea"$>" class="text full low"><$mt:Var name="texts" key="txtarea" escape="html"$></textarea>

・出力用テンプレート

<div class="textarea"><$mt:Var name="fb_value" key="txtarea"$></div>

管理画面用にカスタムフィールドを登録

カスタムフィールド（テキスト）

ベースネーム：block_editor_text
テンプレートタグ：BlockEditorText

カスタムフィールド（見出し）

ベースネーム：block_editor_title
テンプレートタグ：BlockEditorTitle

カスタムフィールド(ブロックエディター）

・コードスニペットで登録

・既定値（テンプレートをインクルード）

<$mt:SetVar name="fb_name"$>
<$mt:SetVar name="fb_name" key="txt" value="block_editor_title"$>
<$mt:SetVar name="fb_name" key="txtarea" value="block_editor_text"$>

<mt:SetVar name="titles">
<mt:Loop name="block_editor_title_loop">
<mt:SetVarBlock name="titles" function="push"><mt:Var name="snippet_option"></mt:SetVarBlock>
</mt:Loop>
<MTVarDump name="titles">

<mt:SetVar name="texts">
<mt:Loop name="block_editor_text_loop">
<mt:SetVarBlock name="texts" function="push"><mt:Var name="snippet_option"></mt:SetVarBlock>
</mt:Loop>
<MTVarDump name="texts">

<div class="block-editor">

<div class="block-editor_content">

<mt:If name="titles">
<mt:Loop name="titles">
<mt:Var name="__counter__" op="--" setvar="index">
<div class="block-editor_wrap field sort-enabled">
<div class="block-editor_title">見出し<button type="button" class="js-blockeditor_btn--remove">削除</button></div>
<div class="block-editor_body">
<input type="text" name="block_editor_title" class="text" value="<mt:Var name="titles" index="$index" escape="html">">
</div>
</div>
</mt:Loop>
</mt:If>

<mt:If name="texts">
<mt:Loop name="texts">
<mt:Var name="__counter__" op="--" setvar="index">
<div class="block-editor_wrap field sort-enabled">
<div class="block-editor_title">テキスト<button type="button" class="js-blockeditor_btn--remove">削除</button></div>
<div class="block-editor_body">
<textarea name="block_editor_text" class="text full low"><$mt:Var name="texts" index="$index" escape="html"$></textarea>
</div>
</div>
</mt:Loop>
</mt:If>

</div>

<div class="block-editor_template">
<MTCustomObjects class="blockeditor">
<div class="block-editor_wrap field sort-enabled block-editor_template<$MTCustomObjectID$>" style="display:none;">
<div class="block-editor_title"><$MTCustomObjectName$><button type="button" class="js-blockeditor_btn--remove">削除</button></div>
<div class="block-editor_body">
<$mt:BlockEditorTemplate$>
</div>
</div>
</MTCustomObjects>
</div>

<div class="block-editor_selecter">
<select class="block-editor_select">
<MTCustomObjects class="blockeditor">
<option value="<$MTCustomObjectID$>"><$MTCustomObjectName$></option>
</MTCustomObjects>
</select>
<button type="button" class="js-blockeditor_btn--add">ブロックを追加する</button>
</div>
</div>

<style>
.block-editor_wrap {
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid #c0c6c9;
  background-color: #fff;
  border-radius: 5px;
  line-height: 1.5;
}
.block-editor_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  font-size: 14px;
  background-color: #757575;
  padding: 5px 10px;
  cursor: move;
}
.block-editor_body {
  padding: 10px;
}
.block-editor_subTable {
  width: 100%;
  margin-bottom: 0;
}
.block-editor_subTable th {
  width: 120px;
  padding: 0 10px;
  text-align: right;
}
.block-editor_radioLabel {
  display: inline-block;
}
.js-blockeditor_btn--remove {
  cursor: pointer;
}
.block-editor_selecter {
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  background-color: #f6bfbc;
  border: 1px solid #ed6d6e;
  border-radius: 5px;
}
</style>

<script>
  ;(function($){
    $(function(){
      $(document).on('click', '.js-blockeditor_btn--remove', function(event){
        event.preventDefault();
        if (window.confirm('削除しますか？')) {
          $(this).parent().parent().remove();
        }
      });
      $(document).on('click', '.js-blockeditor_btn--add', function(event){
        event.preventDefault();
        var selectID = $('.block-editor_select').val();
        var selectClass = '.block-editor_template' + selectID;
        var selectTemplate = $('.block-editor_template').find(selectClass);
        console.log(selectTemplate);
        $(selectTemplate).clone().css('display','block').appendTo('.block-editor_content');
      });
    });
  })(jQuery);
    jQuery('.block-editor_content').sortable({
        items: 'div.field.sort-enabled',
        placeholder: 'placeholder',
        distance: 3,
        opacity: 0.8,
        cursor: 'move',
        forcePlaceholderSize: true,
        handle: '.block-editor_title',
        containment: 'body',
        update: function () {
            jQuery('div.field.sort-enabled', this).trigger('sort-updated');
            sendEntryPrefs();
        }
    });
</script>