单击复选框 - 动态创建的内容时，更改按钮的颜色

Question

I am listing down all the departments in my db like this.

Select * from department

and I am using a pagination to list down departments. Only 8 departments will be listed.

<?php 

 while($row_department = mysql_fetch_array($result))
{
       ?>
 <?php echo $row_department['department_name'];?>
   <div>
      <table width="500" border="0" cellspacing="1" cellpadding="1">
      <tr>
        <td>Department Description</td>
         <td>&nbsp;<textarea name="txt_department_description" cols="50" rows="7" id="txt_department_description"><?php echo $row_department['department_description']; ?>                   </textarea></td>
      </tr>
             <tr>
             <td width="341">&nbsp;<input type="checkbox" name="option"  id="option" onClick="javascript:enableButton();">Click to Delete Department<br></td>
             </tr>
            <tr>
            <td>&nbsp;<input name="enter_department" id="enter_department" type="submit" value="Update Department" /><input name="Reset" type="reset" value="Cancel" />            
  <input name="delete_department" id="delete_department" type="submit" value="Delete Department" />
 </td>
       </tr>
           </table>
           </div>
            <?php } ?>

by this page user can Update or Delete selected departments. Delete button will be enable when user click on the Check Box that above listed. This javascript function will be called onclick event.

<script>
 function enableButton() {
    if(document.getElementById('option').checked){
    alert('1');
    document.getElementById('delete_department').disabled='';
    document.getElementById('enter_department').disabled='true';
    document.getElementById('enter_department').style.backgroundColor ='Grey';
    document.getElementById('delete_department').style.backgroundColor = 'green';
} else {
    document.getElementById('delete_department').disabled='true';
    document.getElementById('enter_department').style.backgroundColor ='';
    document.getElementById('delete_department').style.backgroundColor = '';
}
}   
</script>

when we click on the checkbox on first record, function is working, but if we try to click the second record checkbox, function is not working.

Can anyone please look in this? anything I am doing wrong.