JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<p>Some text some text <span class="foo">some more text</span> additional text.</p>
<p>I am bad at coming up with <span class="foo">fake text</span>, I should
    have looked it up lorem ipsum somewhere.</p>

CSS

.fooSibling {
    color: green;
}

JavaScript

$('p').each(function(){
    var that = $(this),
        foo = that.find('.foo');
    if (that.next().find('.foo').length){
        $(foo[0].nextSibling).wrap('<span class="fooSibling"></span>')
    }
    else if (that.prev().find('.foo').length) {
        $(foo[0].previousSibling).wrap('<span class="fooSibling"></span>')
    }
});