JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <span id="a">wowo wheheh</span>
    <span id="b">lolol wwoww</span>
    <span id="c">hmmmmm</span>
    <span id="d">zzzzzm</span>
</div>

CSS

span { border: 1px solid black; margin: 2px; }

JavaScript

$(document).mouseup(function() {
    
    var s = window.getSelection ? window.getSelection() : document.getSelection();
    
    var from = $(s.anchorNode).closest('span');
    var to = $(s.focusNode).closest('span');
    
    var spans;
    if (from[0] === to[0])
        spans = from;
    else if (from.nextAll('span').is(to))
        spans = from.add(from.nextUntil(to)).add(to);
    else
        spans = to.add(to.nextUntil(from)).add(from);
    
    
    
    console.log(
        'from: ' + from.prop('id'),
        'to: ' + to.prop('id'),
         'spans: ', spans.get());
    
});