enable the array of textboxes php javascript - php

Question

I got the array of disabled text boxes from the database. When I click on edit button it should enable all the text boxes which are in array. But i could only enable the first text box. Here is the code.
code for edit button:
<input type="button" value="Edit" onclick="enable();" />
function enable()
function enable(){
document.getElementById("instance_name").disable = false;
document.getElementById("host_name").disable = false;
}
array:
$result=mysql_query("SELECT user_instance.instance_name, user_instance.host_name FROM
dba_account, user_instance WHERE dba_account.account_id = user_instance.account_id AND
dba_account.account_id = '$accid'");
while($note = mysql_fetch_array($result))
{
<inut type='text' name='instance_name' id='instance_name' disabled='disabled'
value='$note[instance_name]' size='25' />
<input type='text' name='host_name' id='host_name' disabled='disabled'
value='$note[host_name]' size='25' />
}
I am getting all the disabled textboxes, but i can not anable them all. Appreciate your help.

Answer 1

You're giving the same ID to multiple elements. Each ID can only be unique to one element, so once javascript finds the first ID, it stops. I'd give it a class="instance_name" instead and then get the elements by class instead. You could do something like this:
function enable(){
Array.prototype.forEach.call( document.getElementsByClassName('instance_name'),
function(element){
element.removeAttribute('disabled');
});
}