Solve a problem related to smarty, js, and css.

To solve a smarty, js, and css problem, I retrieved the latest 10 records from the database, and then displayed them on the page through samrty. each record is a div, then, use js to control the background color of the div when you hover the cursor over the div. Currently, only the first div is displayed as OK. when you hover the cursor over another div, it is the first solution to the question of smarty, js, and css.
I retrieve the latest 10 records from the database and display them on the page using samrty. each record is a div, then, use js to control the background color of the div when you hover the cursor over the div. Currently, only the first div is displayed as OK. when you hover the cursor over another div, however, the background color of the First div has changed, and the others have not changed. how can this problem be solved?


Js

Function mouseOver (){
Document. getElementById ('Diary'). style. backgroundColor = "# C4C8CC ";
}
Function mouseOut (){
Document. getElementById ('Diary'). style. backgroundColor = "# F4F5F7 ";
}

The page displays a two-dimensional smarty array.

------ Solution --------------------
Send the html code. According to your description, not all div sets the same id attribute value, right?