JSFiddle - React, Tailwind, and code Playground

HTML

<div id="zero"><p>static text before editors</p></div>
<div contenteditable id="first"><p>first HTML editor</p></div>
<div contenteditable id="second"><p>second HTML editor</p></div>
<div id="third"><p>static text after editors</p></div>
<div>
<label><input type="checkbox" id="swap">swap start and end</label><br>
<button onclick="select('zero', 'first');">select from "static text before editors" to "first HTML editor"</button><br>
<button onclick="select('first', 'second');">select from "first HTML editor" to "second HTML editor"</button><br>
<button onclick="select('second', 'third');">select from "second HTML editor" to "static text after editors"</button>
</div>

JavaScript

function select(aStart, aEnd) {
  var selection = document.getSelection();
  var startContainer = document.getElementById(aStart).firstChild.firstChild;
  var startOffset = 0;
  var endContainer = document.getElementById(aEnd).firstChild.firstChild;
  var endOffset = endContainer.length;
  if (document.getElementById("swap").checked) {
    selection.setBaseAndExtent(endContainer, endOffset,
                               startContainer, startOffset);
  } else {
    selection.setBaseAndExtent(startContainer, startOffset,
                               endContainer, endOffset);
  }
}