jQuery apply same functionallity to different divs
<p>I want to have 10 divs that when someone click on each of them or hover by any of them it will change. What I now have is a foreach from the php (goes over the array of stuff I want to show) and writes a script to each in a similar manner, with the only difference being the id of the div:</p>

<pre><code>&lt;?php 
        foreach($lines as $line) {
            $lineId = $line-&gt;getId();
            echo "$('#translation$lineId').hover(
                function() { $('#translation$lineId').css('background-color', 'yellow'); },
                function() { $('#translation$lineId').css('background-color', 'transparent'); });";
            echo "$('#translation$lineId').focusin(function()
                            { $('#translation$lineId').css('background-color', 'red'); });";
            echo "$('#translation$lineId').focusout(function()
                            { $('#translation$lineId').css('background-color', 'transparent'); });";
        }
    ?&gt;
</code></pre>

<p>In the browser it can get to hundreds of lines of code when the number of $lines is big.
Is there a better way? I want to use JQuery for that.</p>

<p>Another bonus question is how do I do in Jquery that when somebody clicks on a div it makes it red and when someone unclicks it (clicks somewhere else) it becomes transparent again. It is somewhat what I tried to do in my code. Jquery here too.</p>

<p>Thanks.</p>
