JSFiddle - React, Tailwind, and code Playground
by pjamesnorris25
HTML
<table border="1" style="margin-bottom:5px; margin-left:26px; border:black thin solid;" id="p88c1">
<tr>
<td align="right"><button class="button-reply" id="p88c1-button">reply - p88c1</button></td>
</tr>
</table><!-- comment -->
<div class="reply-div" id="p88c1-div" style="display:block;">p88c1 - div</div>
<table border="1" style="margin-bottom:5px; margin-left:26px; border:black thin solid;" id="p88c2">
<tr>
<td align="right"><button class="button-reply" id="p88c2-button">reply - p88c2</button></td>
</tr>
</table><!-- comment -->
<div class="reply-div" id="p88c2-div" style="display:block;">p88c2 - div</div>
<table border="1" style="margin-bottom:5px; margin-left:26px; border:black thin solid;" id="p88c3">
<tr>
<td align="right"><button class="button-reply" id="p88c3-button">reply - p88c3</button></td>
</tr>
</table><!-- comment -->
<div class="reply-div" id="p88c3-div" style="display:block;">p88c3 - div</div>
JavaScript
var bool_debug = true;
var collection_button = document.getElementsByClassName("button-reply");
if (bool_debug) { str_button_div = "line <?php echo __LINE__; ?> - str_button_div = \n"; }
for (count = 0; count < collection_button.length; count++)
{
if (bool_debug) { str_button_div += collection_button[count].id; }
ele_div = document.getElementById(collection_button[count].id.substr(0, (collection_button[count].id.length - "button".length)) + "div");
id_div = ele_div.id;
if (bool_debug) { str_button_div += " - " + id_div + "\n"; }
var id_button = collection_button[count].id;
collection_button[count].onclick = function()
{
if (ele_div.style.display === 'block') { ele_div.style.display = 'none'; }
else { ele_div.style.display = 'block'; }
console.log(id_button + " is trying to toggle " + ele_div.id);
}; // button.onclick = function()
} // for (count = 1; count < collection_reply.length; count++)
if (bool_debug) { alert(str_button_div); }