<form>
  <div id="sortacc">

    <!-- other -->
    <div id="a-other" class="b1" data-s="">
      <input class="input0" id="posother" type="hidden"></input>
      <b class="up h-b">up</b> <b class="down h-b">down</b>
    </div>

    <!-- osntxt -->
    <div id="a-osntext" class="b1" data-s="">
      <input class="input0" id="posostxt" type="hidden"></input>
      <b class="up h-b">up</b> <b class="down h-b">down</b>
      <textarea id="message" name="message"><p><b>bold text</b> and text</p></textarea>
    </div>

    <!-- any -->
    <div id="a-any" class="b1" data-s=""></div>

  </div>
</form>
#sortacc>div {
    padding: 1rem;
    margin: 1rem;
    border: 1px solid #555;
    border-radius: 0.75rem;
    background: #f5f9fb7a;
}

.sceditor-container {
    width: 100%!important;
    height: 150px!important;
}
// up or down
$(document).ready(function() {
  $(".up").click(function() {
    var pdiv = $(this).parent('.b1');
    pdiv.insertBefore(pdiv.prev());
    $('.b1').each(function() {
      $(this).find('.input0').val($(this).index());
    });
  });
  $(".down").click(function() {
    var pdiv = $(this).parent('.b1');
    pdiv.insertAfter(pdiv.next());
    $('.b1').each(function() {
      $(this).find('.input0').val($(this).index());
    });
  });
});
// bb-code form
var textarea = document.getElementById('message');
sceditor.create(textarea, {
  enablePasteFiltering: 'true',
  autoUpdate: 'true',
  parserOptions: 'true',
  bbcodeTrim: 'true',
  plugins: 'plaintext,undo,autosave',
  toolbar: 'bold,removeformat,bulletlist|toolbarContainer',
  format: 'bbcode',
});

External CSS

  1. https://cdn.jsdelivr.net/npm/sceditor@3/minified/themes/default.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
  2. https://cdn.jsdelivr.net/npm/sceditor@3/minified/sceditor.min.js