Inconsistent multiple element selection by shared ID #4842
Description
Description
Where there are multiple container elements with children having the same ID attribute, jQuery selector selects only the first elements from the first container with matching ID, but all elements from the following containers. Even though if elements shouldn't share the same ID attribute this behavior may lead to hardly traceable bugs/malfunctions.
Link to test case
https://codepen.io/resetcoder/pen/dyOObbB
Code
<html>
<head>
<style>
#AA {
color: red;
}
#AB {
color: blue;
}
#AC {
color: green;
}
</style>
<script src="jquery-3.5.1.js"></script>
<script>
$(document).ready((e) => {
$("#AA").find("#X").html("X set");
$("#AA").find("#Y").html("Y set");
$("#AA").find("#Z").html("Z set");
$("#AB").find("#X").html("X set");
$("#AB").find("#Y").html("Y set");
$("#AB").find("#Z").html("Z set");
$("#AC").find("#X").html("X set");
$("#AC").find("#Y").html("Y set");
$("#AC").find("#Z").html("Z set");
});
</script>
</head>
<body>
<div id="A">
<div id="AA">
<div id="X">[unchanged]</div>
<div id="X">[unchanged]</div>
<div id="Y">[unchanged]</div>
<div id="Y">[unchanged]</div>
<div id="Z">[unchanged]</div>
<div id="Z">[unchanged]</div>
</div>
<div id="AB">
<div id="X">[unchanged]</div>
<div id="X">[unchanged]</div>
<div id="Y">[unchanged]</div>
<div id="Y">[unchanged]</div>
<div id="Z">[unchanged]</div>
<div id="Z">[unchanged]</div>
</div>
<div id="AC">
<div id="X">[unchanged]</div>
<div id="X">[unchanged]</div>
<div id="Y">[unchanged]</div>
<div id="Y">[unchanged]</div>
<div id="Z">[unchanged]</div>
<div id="Z">[unchanged]</div>
</div>
</div>
</body>
</html>
Output
X set
[unchanged]
Y set
[unchanged]
Z set
[unchanged]
X set
X set
Y set
Y set
Z set
Z set
X set
X set
Y set
Y set
Z set
Z set