How to handle unknown number of PHP generated elements with JavaScript
<p>I am building a web app that includes user administration.
So when an admin loads the user list, PHP shows all users in a table, dynamically loading them from the database in a while loop.</p>

<p>So how many users end showing up is not standard.
Along with the userlist I create buttons aside each username with options.</p>

<p>So for example I have user1 - deleteBTN - changePassBTN</p>

<p>What I tried at first was this :</p>

<pre><code>window.onload = function() {
    var userRoleID = document.getElementById("userRoleID");
    var sessionRoleID = document.getElementById("sessionRoleID");
    var promoteButton = document.getElementById("promoteUser");
    var demoteButton = document.getElementById("demoteUser");
    var addButton = document.getElementById("addUser");
    var deleteButton = document.getElementById("deleteUser");
    var changePasswordButton = document.getElementById("changePassword");

    if ((userRoleID.value == 0) || (userRoleID.value == sessionRoleID.value)) {     //cannot promote another user beyond own level
        promoteButton.disabled = true;
    }
    if (userRoleID.value == 2) {                                                    //minimum demote level
        demoteButton.disabled = true;
    }
    if (sessionRoleID.value == 1) {                                                 //administrator disabled options
        addButton.disabled = true;
        promoteButton.disabled = true;
        demoteButton.disabled = true;
        changePasswordButton.disabled = true;
        deleteButton.disabled = true;   
    }
};
</code></pre>

<p>PHP Script :</p>

<pre><code>while ($row = mysql_fetch_array($result)) {
    $i = $i + 1;
    if ($_SESSION['doctorID'] == $row['doctorID']) {
        echo "&lt;tr "; if ($i % 2) { echo "class='alt'"; } echo "&gt;&lt;td&gt;" . $i . "&lt;input type='hidden' id='sessionRoleID' value='" . $_SESSION['userRoleID'] . "'&gt;&lt;/td&gt;&lt;td&gt;" . $row['username'] . "&lt;/td&gt;&lt;td&gt;" . getUserRole($row['userRoleID']) . "&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td class='centered'&gt;&lt;a href='?setting=userlist&amp;action=changePassword&amp;userID=" . $row['doctorID'] . "'&gt;&lt;button&gt;Change Password&lt;/button&gt;&lt;/a&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;";    
    }
    else {
        echo "&lt;tr "; if ($i % 2) { echo "class='alt'"; } echo "&gt;&lt;td&gt;" . $i . "&lt;input type='hidden' id='userRoleID' value='" . $row['userRoleID'] . "'&gt;&lt;/td&gt;&lt;td&gt;" . $row['username'] . "&lt;/td&gt;&lt;td&gt;" . getUserRole($row['userRoleID']) . "&lt;/td&gt;&lt;td class='centered'&gt;&lt;a href='index.php?setting=userlist&amp;action=promoteUser&amp;userID=" . $row['doctorID'] . "&amp;userRoleID=" . $row['userRoleID'] . "'&gt;&lt;button id='promoteUser'&gt;Promote User&lt;/button&gt;&lt;/a&gt;&lt;a href='index.php?setting=userlist&amp;action=demoteUser&amp;userID=" . $row['doctorID'] . "&amp;userRoleID=" . $row['userRoleID'] . "'&gt;&lt;button id='demoteUser'&gt;Demote User&lt;/button&gt;&lt;/a&gt;&lt;/td&gt;&lt;td class='centered'&gt;&lt;a href='?setting=userlist&amp;action=changePassword&amp;userID=" . $row['doctorID'] . "'&gt;&lt;button id='changePassword'&gt;Change Password&lt;/button&gt;&lt;/a&gt;&lt;/td&gt;&lt;td class='centered'&gt;&lt;a href='?setting=userlist&amp;action=deleteUser&amp;userID=" . $row['doctorID'] . "'&gt;&lt;button id='deleteUser'&gt;Delete User&lt;/button&gt;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;";
    }
}
</code></pre>

<p>Then I realised it won't work because all similar buttons have the same ID so JS only loads the first one.</p>

<p>The buttons won't work for the rest of the users.
Is there anyway to overcome this?</p>

<p>Thank you in advance</p>
