JSFiddle - React, Tailwind, and code Playground

HTML

<html>
   <body>
       <div id="results">
       </div>
       <div id="content" style="display: none">
       </div>
   </body>
</html>

JavaScript

// the number of elements we will find
var elementCount = 1000; 

// the noise in between the elements
var noise = '<input data-test="bar" />'; 

// the noise to element ratio (0 is no noise)
var noiseFactor = 100; 

var $content = $('#content');

                 
var ids = [];
for (var i = 0; i < elementCount; ++ i) {
    var id = 'testId' + i;
    var element = '<input id="' + id + '" data-test="foo" />';
    ids.push('#' + id);
    
    $content.append(element);
    for (var j = 0; j < noiseFactor; ++ j) {
        $content.append(noise);
    }
}

var idFoundCount = 0;

var startTime = new Date().getTime();
for (var i = 0; i < ids.length; ++ i) {
    idFoundCount += $(ids[i]).length
}
var idLookupTime = new Date().getTime() - startTime;

 startTime = new Date().getTime();
var dataFoundCount = $('input[data-test="foo"]').length;
var dataLookupTime = new Date().getTime() - startTime;

$('#results').append('idLookup took:   ' + idLookupTime + 'ms, found:' + idFoundCount + '<br>');
$('#results').append('dataLookup took: ' + dataLookupTime + 'ms, found: ' + dataFoundCount + '<br>');