JSFiddle - React, Tailwind, and code Playground

HTML

<div>prevAll returns results in closest-first order, but if the selector has a :not() with a list of classes in it, like :not(.unwanted,.skip), it alters the order of the results.  All three selectors in the javascript should select the row labeled "Second".  The broken selector is repeated to put a * in front of all the rows it selects, to show that the prevAll finds the right ones, it's just the order that is incorrect.</div><br/>
<div class="foo unwanted">Not me</div>
<div class="foo">First</div>
<div class="foo">Second</div>
<div class="foo" id="ref">Third</div>
<div class="foo">Fourth</div>
<div class="foo">Fifth</div>

JavaScript

$(document).ready(function() {
    $('#ref').prevAll('.foo').first().append('<span> - this should be here</span>');
    $('#ref').prevAll('.foo:not(.unwanted,.skip)').first().append('<span> - this should be on Second, not here');
    $('#ref').prevAll('.foo:not(.unwanted,.skip)').prepend('<span> * </span>');    
    $('#ref').prevAll('.foo:not(.unwanted):not(.skip)').first().append('<span> - works correctly if you split the not() </span>');
});