JSFiddle - React, Tailwind, and code Playground

HTML

<div id="non-unique-id" class="non-unique-class">
    <strong>Element 1</strong>
</div>
<div id="non-unique-id" class="non-unique-class">
     <strong>Element 2</strong>
</div>

CSS

.non-unique-class {
  font-family: monospace;
  border: 1px solid #ccc;
  background-color: #e1e1e1;
  border-radius: 3px;
  margin: 5px;
  width: calc(50% - 22px);
  float: left;
  padding: 5px;
}

JavaScript

document.getElementById("non-unique-id").innerHTML += "<br />getElementById";
document.querySelector("#non-unique-id").innerHTML += "<br />querySelector[ID]";
document.querySelector(".non-unique-class").innerHTML += "<br />querySelector[CLASS]";

document.querySelectorAll("#non-unique-id").forEach(function (element) {
	element.innerHTML += "<br />querySelectorAll[ID]";
});
document.querySelectorAll(".non-unique-class").forEach(function (element) {
	element.innerHTML += "<br />querySelectorAll[CLASS]";
});