title: programmatically select part of content on another contenteditable div
body: <pre><code>&lt;div  id="leftdiv"   style="float:left;display:inline-block;height:100px;font-family:Helvetica;font-size:14px;width:300px;border:1px solid red;" contenteditable&gt;
      &lt;div&gt;
          first text
      &lt;/div&gt;
      &lt;div&gt;
          second text
      &lt;/div&gt;
      ...
      &lt;div&gt;
          other texts
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div  id="rightdiv" style="margin-left:1em;display:inline-block;float:left;width:300px;height:100px;font-family:Helvetica;font-size:14px;border:1px solid red;" contenteditable&gt;
      &lt;div&gt;
          first text
      &lt;/div&gt;
      &lt;div&gt;
          second text
      &lt;/div&gt;
      ...
      &lt;div&gt;
          other texts
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have two contenteditable divs and these divs have exactly the same content. When I highlight part of content  in leftdiv like "ond" in "second" text using mouse, i want exactly the same part in rightdiv highlighted at the same time. Eventually  2 highlighting in seperate divs will occur simultaneously.     </p>
  
  <p>I have tried this but nothing happens.</p>
  
  <pre><code>  $('#leftdiv').on('mousedown', function() {
          $('#leftdiv').on('selectstart', function() {
              document.getElementById('rightdiv').tabIndex = -1 ;
              document.getElementById('rightdiv').focus();
              var range  = document.createRange();
              range.selectNodeContents(this);
              var sel  = window.getSelection();
              sel.removeAllRanges();
              sel.addRange(range);
          });
   });
  </code></pre>