title: Sort the string when using sortable()
body: <p>I have a string that looks like this:</p>
  <pre><code>[TITLE|prefix=test][DYNAMIC|limit=777|random=1][STORENAME]
  </code></pre>
  <p>So <code>[TITLE]</code>, <code>[DYNAMIC]</code> and <code>[STORENAME]</code> are tags and I would like to sort them by using <code>sortable()</code>, which is from jQuery UI.</p>
  <p>So for instance, if the div with the content <em>Dynamic</em> will be moved to the first place, the string should be <code>[DYNAMIC|limit=777|random=1][TITLE|prefix=test][STORENAME]</code> or if the div with the content <em>Title</em> has been moved to the last place, the string should be <code>[DYNAMIC|limit=777|random=1][STORENAME][TITLE|prefix=test]</code></p>
  <p>This is what I have tried so far:</p>
  <pre class="lang-js prettyprint-override"><code>let tags = '[TITLE|prefix=test][DYNAMIC|limit=777|random=1][STORENAME]';
  
  $(&quot;.sort-me&quot;).sortable({
    connectWith: &quot;.connectedSortable&quot;,
    cursor: &quot;grabbing&quot;,
    opacity: 0.7,
    beforeStop: function(event, ui) {
      // Check the position of the dragged item
      $('.mt-box').each(function(key, value) {
        if (ui.item.index() === key &amp;&amp; value.className === ui.item[0].className &amp;&amp; $(ui.item[0]).find('.form-check-input')[0].checked) {
          const sortTags = () =&gt; {
            const querySplits = tags.split(']');
            let selectedTag = '';
            querySplits.forEach((queryValue, queryKey) =&gt; {
              if (queryValue.includes($(ui.item[0]).attr('data-mt-field').toUpperCase())) {
                selectedTag = queryValue + ']';
                querySplits[queryKey] = '';
              }
              if (querySplits[queryKey].length &gt; 0 &amp;&amp; querySplits[queryKey].slice(-1) !== ']') {
                querySplits[queryKey] += ']';
              }
            });
            querySplits.splice(ui.item.index(), 0, selectedTag);
            tags = querySplits.filter((el) =&gt; el).join(']').replace(/[\]]]+/, ']');
            console.log(tags);
          }
  
          sortTags();
  
        }
      });
    }
  });
  </code></pre>
  <p>If you set any item in the first place, the sorting works correctly. But if you move anything else, for instance, the first item in second or in third place, the sorting will not be correct.</p>
  <p>Please see my code on <a href="https://jsfiddle.net/4pyqfhx9/" rel="nofollow noreferrer">JSFIDDLE</a> and see the console when moving the items.</p>