JSFiddle - React, Tailwind, and code Playground

by Ori Drori

HTML

<div id="otherId1"></div>
<div id="otherId2"></div>
<div id="otherId3"></div>
<div id="otherId4"></div>
<div id="otherId5"></div>
<div id="otherId6"></div>
<div id="otherId7"></div>
<div id="otherId8"></div>
<div id="otherId9"></div>
<div id="otherId10"></div>
<div id="otherId11"></div>
<div id="otherId12"></div>
<div id="otherId13"></div>
<div id="otherId14"></div>
<div id="otherId15"></div>
<div id="otherId16"></div>
<div id="otherId17"></div>
<div id="otherId18"></div>
<div id="otherId19"></div>
<div id="otherId20"></div>
<div id="1" class="item"></div>
<div id="2" class="item"></div>
<div id="3" class="item"></div>
<div id="4" class="item"></div>
<div id="5" class="item"></div>
<div id="6" class="item"></div>
<div id="7" class="item"></div>
<div id="8" class="item"></div>
<div id="9" class="item"></div>
<div id="10" class="item"></div>
<div id="11" class="item"></div>
<div id="12" class="item"></div>
<div id="13" class="item"></div>
<div id="14" class="item"></div>
<div id="15" class="item"></div>
<div id="16" class="item"></div>
<div id="17" class="item"></div>
<div id="18" class="item"></div>
<div id="19" class="item"></div>
<div id="20" class="item"></div>

JavaScript

for (var i = 0; i < 100; i++) {
    console.log(getIdsListByClassName('item'));
}

function getIdsListByClassName(className) {
    var elements = document.querySelectorAll('[id].' + className); // get all items that have the id attribute and the defined class name

    var ids = Array.prototype.slice.call(elements, 0).map(function (element) {
        return element.getAttribute('id');
    }); // convert the elements list to array, and map it to ids

    var currentIndex = Math.floor(Math.random() * ids.length); // get an index between 0 and ids.length - 1

    return ids[currentIndex];
}