?? Refering to unique Document Elements in table rows

[The_MA]

Hi, I'd really appreciate your input on this problem I'm having, many thanks in advance guys. I need some coffee now.

This JS switches the image and state on receipt of a string. My problem is that it only works for the first row and any subsequent rows do not work - how do I uniquely refer to each element in each row? Many thanks,

Mark.

var messagebits = new Array();
messagebits = message.split(' ');
devicename = messagebits[0];
devicestatus = messagebits[1];

if (devicestatus == "on") {

document.getElementById("image").src ="Images/d/"+devicename+"off.jpg";
document.getElementById("switch").src ="Images/g.jpg";
document.getElementById("state").value ="off";
}

if (devicestatus == "off") {

document.getElementById("image").src ="Images/d/"+devicename+"on.jpg";
document.getElementById("switch").src ="Images/r.jpg";
document.getElementById("state").value ="on";
}
}

The JS above refers to these elements in PHP:

echo '<tr><td><center><img id="image" name="image" src="Images/d/' . $device .   

'on.jpg"><p>'; 

echo '<td><center><font size="2" face="Verdana">' . $device . '<p><td><center> 

<form action="' . $self . '" name="sc" target="b" method="post"> 
<input type="hidden" name=" device[] " value="' . $device . '"> 
<input type="hidden" id ="state" name=" state[] " value="on"> 

<input type="image" id="switch" name="switch" img src="Images/g.jpg"   

border="0"></form>'; 
} 

Perhaps something with the table.row[] element?

[mjax]

You have to remember that ID's in DOM have to be unique. It looks like you are generating table rows that contain IMG tags that have the same ID. Make sure that each IMG has its own unique ID and target that specific ID from the Javascript.