I have several parent div elements with pairs of button and div child elements.
My goal is to apply changes to the corresponding div when a button is clicked. For example, clicking Button 2 should only affect toast 2. However, I am facing an issue where only the first occurrence is being modified regardless of the button clicked.
In the provided example, I demonstrated changing the display value of the relevant element, but any CSS modification should be possible in reality.
You can find a complete and functional codepen here.
function hide() {
var element = document.querySelector('.toast');
element.style.display = (element.style.display == 'none') ? 'block' : 'none';
}.parent {
position : relative;
display : inline-block;
height : 55px;
}
button#button {
width : 100px;
height : 35px;
}
.toast {
display : block;
position : absolute;
top : 40px;
background-color : black;
}<div class="parent">
<button id="button" onclick="hide()">Button 1</button>
<div class="toast">A box with text</div>
</div>
<div class="parent">
<button id="button" onclick="hide()">Button 2</button>
<div class="toast">A box with text</div>
</div>
<div class="parent">
<button id="button" onclick="hide()">Etc...</button>
<div class="toast">A box with text</div>
</div>