JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="result">
        both values should be same, but they are not
    </div>

    <div class="sandbox">
        <div class="test"id="innertab-1">
            <div class="test" id="innertab-2">
                <div class="test" id="innertab-3">
                    <div class="test"id="innertab-4">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

JavaScript

var result1 = ($('.sandbox').find('.test:not(.test .test)').length);
var result2 = ($('.sandbox').find('div:not(div div)').length);

$('div.result').html(result1 + ' ' + result2)